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

import CardContainer from '@material-hu/components/design-system/CardContainer';

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

import FormSegmentation from 'src/components/FormInputs/FormSegmentation';

type LearningSegmentationProps = {
  errorMessage: string;
  name: string;
  disabled?: boolean;
};

export const LearningSegmentation = ({
  errorMessage,
  name,
  disabled = false,
}: LearningSegmentationProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette, typography } = useTheme();

  return (
    <CardContainer fullWidth>
      <FormSegmentation
        name={name}
        segmentationErrorMessage={errorMessage}
        showLabel
        label={t(`common.segmentation`)}
        labelSx={{
          fontWeight: 'fontWeightBold',
          fontSize: (typography as any).globalM.fontSize,
          color: palette.textColors?.neutralText,
          pb: 2.5,
        }}
        autoCompleteDefaultSearchOptions={{
          enableEmptyQuery: true,
          defaultLimit: 10,
        }}
        autocompleteProps={{ disabled }}
        accordionSummaryProps={{ disabled }}
        radioProps={{ disabled }}
      />
    </CardContainer>
  );
};