import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';

import { useLokaliseTranslation } from 'src/utils/i18n';

import ReportAddColumnsForm from '../components/ReportAddColumnsForm';
import { ADD_COLUMNS_FORM_ID } from '../components/ReportAddColumnsForm/constants';
import { ReportAddColumnsFormColumn } from '../components/ReportAddColumnsForm/types';

type UseAddColumnsDrawerProps = {
  onConfirm?: (data: ReportAddColumnsFormColumn[]) => void;
  columns?: ReportAddColumnsFormColumn[];
};

const useAddColumnsDrawer = ({
  onConfirm,
  columns,
}: UseAddColumnsDrawerProps) => {
  const { t } = useLokaliseTranslation('employee_lifecycle');

  const addColumnsDrawer = useDrawerV2(() => ({
    children: (
      <ReportAddColumnsForm
        defaultValues={{ segmentationGroupIds: columns || [] }}
        onSubmit={values => {
          addColumnsDrawer.closeDrawer();
          onConfirm?.(values.segmentationGroupIds);
        }}
      />
    ),
    title: t('process_report.list.add_columns_drawer.title'),
    primaryButtonProps: {
      fullWidth: true,
      children: t('process_report.list.add_columns_drawer.form.actions.apply'),
      type: 'submit',
      form: ADD_COLUMNS_FORM_ID,
    },
    secondaryButtonProps: {
      fullWidth: true,
      children: t('general:cancel'),
      type: 'reset',
      form: ADD_COLUMNS_FORM_ID,
      onClick: () => {
        addColumnsDrawer.closeDrawer();
      },
    },
  }));

  return addColumnsDrawer;
};

export default useAddColumnsDrawer;