import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';
import {action} from '@storybook/addon-actions';
import {Button} from '@components';
import {DEFAULT_REACTION} from '@shared/constants';

import {ReactionsSummaryBottomSheet} from './index';
import {mockReactions, mockUsers} from './mocks';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

const QUERY_DATA = {
  data: mockUsers,
  isLoading: false,
};

export default {
  title: 'Custom/ReactionsSummaryBottomSheet',
  component: ReactionsSummaryBottomSheet,
};

export const Default = () => {
  const [visible, setVisible] = useState(false);

  const toggleVisibility = () => {
    setVisible(!visible);
    action('toggleVisibility')();
  };

  const onClose = () => {
    setVisible(false);
    action('onClose')();
  };

  return (
    <View style={styles.container}>
      <Button
        text={visible ? 'Hide Reaction Picker' : 'Show Reaction Picker'}
        onPress={toggleVisibility}
      />
      <ReactionsSummaryBottomSheet
        visible={visible}
        selectedReaction={DEFAULT_REACTION}
        setSelectedReaction={() => {}}
        reactions={mockReactions}
        queryData={QUERY_DATA}
        onClose={onClose}
      />
    </View>
  );
};
