import React, { useState } from 'react';
import { Box, InfoText, MainButton, Modal, Switch, Text, ThemeColorType } from '@nova-hf/ui';
import { ModalProps } from '@nova-hf/ui/umd/ts/src/modal/Modal';
import { CreditControl, CreditControlSettingInput } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

type CreditControlModalProps = {
  onConfirm: (creditControlInput: CreditControlSettingInput[]) => void;
  isLoading?: boolean;
  creditControls?: CreditControl[];
  color?: ThemeColorType;
} & Pick<ModalProps, 'isVisible' | 'onVisibilityChange'>;

export const CreditControlModal = ({
  onConfirm,
  onVisibilityChange,
  isVisible,
  isLoading,
  creditControls,
  color,
}: CreditControlModalProps) => {
  const { t } = useTranslation('alltSaman');
  const [creditControlToggle, setCreditControlToggle] = useState<boolean>(false);
  const [creditControlInput, setCreditControlInput] = useState<CreditControlSettingInput[]>([]);

  const inputCreditControl = (creditControl: CreditControl, toggleOnOff: boolean) => {
    setCreditControlInput([
      ...creditControlInput,
      { isToggledOn: toggleOnOff, type: creditControl.type },
    ]);
  };

  return (
    <Modal
      ariaLabel="Modal to confirm action"
      isVisible={isVisible}
      onVisibilityChange={onVisibilityChange}
    >
      <Box display="flex" flexDirection="column" alignItems="center" width="100%">
        {creditControls?.map((creditControl, i) => {
          return (
            <Box key={i}>
              {creditControl.widgetType === 'OnOff' && (
                <>
                  <Box display="flex" flexDirection="row" alignItems="center" gap={8} width="100%">
                    <Switch
                      isOn={creditControlToggle}
                      onToggle={() => {
                        setCreditControlToggle(!creditControlToggle);
                        inputCreditControl(creditControl, !creditControlToggle);
                      }}
                      color={color}
                    />
                    <Box width="9/12">
                      <Text>{creditControl.name}?</Text>
                      <InfoText>{creditControl.description}</InfoText>
                    </Box>
                  </Box>
                </>
              )}
            </Box>
          );
        })}
        <Box
          display="flex"
          flexDirection={['column', 'row', 'row']}
          width={{ sm: '100%', md: '4/12' }}
          marginTop="2/12"
        >
          <MainButton
            text={t('alltSaman.submitButton')}
            onClick={() => onConfirm(creditControlInput)}
            colorScheme="warning"
            dottedShadow="none"
            isLoading={isLoading}
          />
        </Box>
      </Box>
    </Modal>
  );
};