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

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

import { SessionModes } from 'src/pages/dashboard/Learning/Sessions/constants';
import { newSessionFields } from 'src/pages/dashboard/Learning/Sessions/New/form';
import { type NewSessionFormValues } from 'src/pages/dashboard/Learning/Sessions/types';

import { SessionStatusAlert } from '../SessionStatusAlert';

import { SessionAttendance } from './SessionAttendance';
import SessionCertificate from './SessionCertificate';
import SessionCollaborator from './SessionCollaborator';
import SessionNotifications from './SessionNotifications';
import SessionPresential from './SessionPresential';
import SessionType from './SessionType';
import SessionVirtual from './SessionVirtual';

const SessionConfiguration = () => {
  const { control, clearErrors } = useFormContext<NewSessionFormValues>();
  const type = useWatch({
    control,
    name: newSessionFields.configuration.type(),
  });

  const handleChangeType = () => {
    clearErrors();
  };

  return (
    <>
      <SessionStatusAlert />
      <SessionType onChange={handleChangeType} />
      <Fade
        in={type === SessionModes.presential}
        {...(type === SessionModes.presential ? { timeout: 600 } : {})}
        unmountOnExit
      >
        <Stack sx={{ gap: 2 }}>
          <SessionPresential />
          <SessionCollaborator />
          <SessionCertificate />
          <SessionAttendance />
          <SessionNotifications />
        </Stack>
      </Fade>
      <Fade
        in={type === SessionModes.virtual}
        {...(type === SessionModes.virtual ? { timeout: 600 } : {})}
        unmountOnExit
      >
        <Stack sx={{ gap: 2 }}>
          <SessionVirtual />
          <SessionCollaborator />
          <SessionCertificate />
          <SessionAttendance />
          <SessionNotifications />
        </Stack>
      </Fade>
    </>
  );
};

export default SessionConfiguration;