import { useState } from 'react';

import { useDrawer } from '@material-hu/hooks/useDrawer';
import Drawer from '@material-hu/mui/Drawer';

import { DrawerProps } from '@material-hu/components/design-system/Drawer/types';

import CustomRangesDrawer, {
  CustomRangesDrawerEvents,
} from 'src/pages/dashboard/Goals/Configuration/components/CustomRangesDrawer';
import RangesSimulator from 'src/pages/dashboard/Goals/Configuration/components/CustomRangesDrawer/components/RangesSimulator';
import { FormulasProvider } from 'src/pages/dashboard/Goals/Configuration/components/CustomRangesDrawer/FormulasContext';
import { GoalFormulaChain } from 'src/types/goals';
import { useLokaliseTranslation } from 'src/utils/i18n';

const useCustomRangesEditDrawer = () => {
  const { t } = useLokaliseTranslation('goals');
  const [isSaveDisabled, setIsSaveDisabled] = useState(false);
  const [chain, setChain] = useState<GoalFormulaChain | undefined>(undefined);

  const {
    drawer,
    closeDrawer,
    showDrawer: openDrawer,
  } = useDrawer<DrawerProps>(Drawer, {
    title: t('formulas.title'),
    anchor: 'right',
    PaperProps: {
      sx: {
        width: '100%',
        maxWidth: 1320,
        borderTopLeftRadius: 16,
        borderBottomLeftRadius: 16,
      },
    },
    sx: {
      '& .MuiDrawer-paper > .MuiStack-root > .MuiStack-root': {
        overflowY: 'auto',
      },
    },
    primaryContent: (
      <CustomRangesDrawer
        chainId={chain?.id}
        updateDisabled={setIsSaveDisabled}
      />
    ),
    secondaryContent: <RangesSimulator />,
    primaryButtonProps: {
      children: t('general:save'),
      disabled: isSaveDisabled,
      onClick: () => {
        window.dispatchEvent(
          new CustomEvent(CustomRangesDrawerEvents.CUSTOM_RANGES_EDIT_SAVE),
        );
        closeDrawer();
      },
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
      onClick: () => {
        closeDrawer();
      },
    },
  });

  const wrappedDrawer = <FormulasProvider>{drawer}</FormulasProvider>;

  const showDrawer = (goalChain?: GoalFormulaChain) => {
    setChain(goalChain);
    openDrawer();
  };

  return { drawer: wrappedDrawer, closeDrawer, showDrawer };
};

export default useCustomRangesEditDrawer;