import { FC, PropsWithChildren } from 'react';

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

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

type Props = {
  label: string;
  required?: boolean;
  fieldName?: string;
};

const FilterFormItem: FC<PropsWithChildren<Props>> = ({
  label,
  children,
  fieldName,
  required = false,
}) => {
  const { watch } = useFormContext();

  const value = fieldName ? watch(fieldName) : [];
  const description = fieldName
    ? value.map((item: any) => item.label).join(', ')
    : '';

  return (
    <HuAccordion
      elevation={0}
      hasPadding
      defaultExpanded
      title={label + (required ? ' *' : '')}
      description={description}
      sx={{
        backgroundColor: ({ palette }) => palette.new.background.layout.default,
      }}
      customDetail={children}
    />
  );
};

export default FilterFormItem;
