import { useTheme } from '@material-hu/mui/styles';

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

import { newPathFields } from 'src/pages/dashboard/Learning/Paths/New/form';
import { getSwitchersSx } from 'src/pages/dashboard/Learning/Paths/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

const ConfigurationBasics = () => {
  const { t } = useLokaliseTranslation(['learning']);
  const theme = useTheme();

  return (
    <HuCardContainer
      fullWidth
      sx={{
        '& .MuiCardContent-root': {
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
        },
      }}
    >
      <HuTitle
        variant="M"
        title={t(`common.basic_configuration`)}
      />
      <HuFormSwitcher
        name={newPathFields.configuration.isObligatory()}
        switcherProps={{
          title: t(`path.required.title_long`),
          description: t(`path.required.description`),
          sx: getSwitchersSx(theme),
        }}
      />
      <HuFormSwitcher
        name={newPathFields.configuration.isSequential()}
        switcherProps={{
          title: t(`common.sequential_order`),
          description: t(`path.sequential.description`),
          sx: getSwitchersSx(theme),
        }}
      />
    </HuCardContainer>
  );
};

export default ConfigurationBasics;