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

import Stack from '@material-hu/mui/Stack';

import { certificateCreateFields } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/form';
import { type CertificateCreateFormValues } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/types';
import { CertificateType } from 'src/pages/dashboard/Learning/Settings/Certificates/constants';

import CertificateAlignmentSection from './CertificateAlignmentSection';
import CertificateLogosSection from './CertificateLogosSection';
import CertificateSignaturesSection from './CertificateSignaturesSection';
import CertificateStylesSection from './CertificateStylesSection';

const CertificateDesignForm = () => {
  const { control } = useFormContext<CertificateCreateFormValues>();
  const type = useWatch({
    control,
    name: certificateCreateFields.type(),
  });
  const isCustomTemplate = type === CertificateType.CUSTOM_BACKGROUND;

  return (
    <Stack sx={{ gap: 2 }}>
      {!isCustomTemplate && <CertificateStylesSection />}
      <CertificateSignaturesSection />
      <CertificateLogosSection />
      <CertificateAlignmentSection />
    </Stack>
  );
};

export default CertificateDesignForm;
