import { type FC } from 'react';

import { Stack, Typography } from '@mui/material';

import CardContainer from '../../design-system/CardContainer';
import FormDatePicker from '../../design-system/Inputs/DatePicker/form';
import FormRadioButton from '../../design-system/RadioButton/RadioButton/form';

import { type DatePickerWithOptionsProps } from './types';

const DatePickerWithOptions: FC<DatePickerWithOptionsProps> = ({
  label,
  options,
  startDatePicker,
  endDatePicker,
  cardContainerProps = { fullWidth: true },
  optionsGap = 2,
  datePickersGap = 1,
  sectionGap = 1.5,
  sx,
  showDatePickers,
  allowDeselect = true,
}) => {
  const hasOptions = !!options && options.length > 0;
  const hasDatePickers = startDatePicker || endDatePicker;

  const shouldShowDatePickers = showDatePickers ?? hasDatePickers;

  // Don't render anything if there's nothing to show
  if (!hasOptions && !shouldShowDatePickers) {
    return null;
  }

  const content = (
    <Stack sx={sx}>
      {label && (
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
          sx={{ mb: 2 }}
        >
          {label}
        </Typography>
      )}
      <Stack sx={{ gap: sectionGap }}>
        {hasOptions && (
          <Stack sx={{ gap: optionsGap }}>
            {options.map(option => (
              <FormRadioButton
                key={option.name}
                name={option.name}
                isOnlyOption
                allowDeselect={allowDeselect}
                radioButtonProps={{
                  label: option.label,
                  ...option.radioButtonProps,
                }}
              />
            ))}
          </Stack>
        )}
        {shouldShowDatePickers && (
          <Stack sx={{ gap: datePickersGap }}>
            {startDatePicker && (
              <Stack sx={{ gap: 0.5 }}>
                <FormDatePicker
                  name={startDatePicker.name}
                  inputProps={{
                    label: startDatePicker.label,
                    disabled: startDatePicker.disabled,
                    ...startDatePicker.inputProps,
                  }}
                />
              </Stack>
            )}
            {endDatePicker && (
              <Stack sx={{ gap: 0.5 }}>
                <FormDatePicker
                  name={endDatePicker.name}
                  inputProps={{
                    label: endDatePicker.label,
                    disabled: endDatePicker.disabled,
                    ...endDatePicker.inputProps,
                  }}
                />
              </Stack>
            )}
          </Stack>
        )}
      </Stack>
    </Stack>
  );

  // If cardContainerProps is explicitly set to null, render without wrapper
  if (cardContainerProps === null) {
    return content;
  }

  return <CardContainer {...cardContainerProps}>{content}</CardContainer>;
};

export type {
  DateOption,
  DatePickerConfig,
  DatePickerWithOptionsProps,
} from './types';

export default DatePickerWithOptions;