import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {CardContainer, Switch, Typography} from '@components';
import {SetState} from '@interfaces/generic';
import {PollConfiguration} from '@modules/post/interfaces';

import PollEndTimeConfig from './components/PollEndTimeConfig';
import {styles} from './styles';

interface Props {
  pollConfiguration: PollConfiguration;
  setPollConfiguration: SetState<PollConfiguration>;
  isEndDateBeforeNow: boolean;
  showVotersSwitch?: boolean;
}

function PollConfig({
  pollConfiguration,
  setPollConfiguration,
  isEndDateBeforeNow,
  showVotersSwitch = true,
}: Props) {
  const {t} = useTranslation();

  const onToggleAnonymous = (newValue: boolean) => {
    setPollConfiguration((prev: PollConfiguration) => ({
      ...prev,
      isAnonymous: newValue,
    }));
  };

  return (
    <View style={styles.container}>
      <Typography weight="semiBold" variant="m">
        {t('general.settings')}
      </Typography>
      <CardContainer style={styles.cardContainer}>
        <PollEndTimeConfig
          pollConfiguration={pollConfiguration}
          setPollConfiguration={setPollConfiguration}
          isError={isEndDateBeforeNow}
        />
        {showVotersSwitch && (
          <Switch
            value={pollConfiguration.isAnonymous}
            onToggle={onToggleAnonymous}
            title={t('post.hide_voters')}
            description={t('post.hide_voters_description')}
          />
        )}
      </CardContainer>
    </View>
  );
}

export default PollConfig;
