import { FC, ReactElement } from 'react';
import { useFormContext } from 'react-hook-form';

import { IconInfoCircle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormSwitcher from '@material-hu/components/design-system/Switcher/form';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

type Props = {
  switcherFormName: string;
  FormElement: ReactElement;
  switchTitle: string;
  switchTooltipTitle: string;
};

const FormSwitchCardItem: FC<Props> = ({
  FormElement,
  switcherFormName,
  switchTitle,
  switchTooltipTitle,
}) => {
  const { watch } = useFormContext();
  const value = watch(switcherFormName);

  return (
    <HuCardContainer
      fullWidth
      sx={{
        backgroundColor: ({ palette }) => palette.new.background.layout.default,
        border: 'unset',
      }}
    >
      <Stack sx={{ gap: 1.5 }}>
        <HuFormSwitcher
          name={switcherFormName}
          switcherProps={{
            title: switchTitle,
            Icon: (
              <HuTooltip title={switchTooltipTitle}>
                <IconInfoCircle size={20} />
              </HuTooltip>
            ),
          }}
        />
        {value && FormElement}
      </Stack>
    </HuCardContainer>
  );
};

export default FormSwitchCardItem;