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

import { TextInformation } from '@material-hu/components/composed-components/learning';

import { InformationRow } from 'src/pages/dashboard/Learning/common/components/InformationRow';
import { RevisionAccordion } from 'src/pages/dashboard/Learning/common/components/RevisionAccordion';
import { PathSteps } from 'src/pages/dashboard/Learning/Paths/constants';
import { type NewPathFormValues } from 'src/pages/dashboard/Learning/Paths/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

const RevisionBasicConfiguration = () => {
  const { t } = useLokaliseTranslation('learning');
  const { getValues } = useFormContext<NewPathFormValues>();

  const data = [
    {
      title: t(`path.name`),
      description: getValues('basic_information.title'),
    },
    {
      title: t(`common.description`),
      description: getValues('basic_information.description') || '',
    },
  ] as const;

  return (
    <RevisionAccordion step={PathSteps.BASIC_INFORMATION}>
      {data.map(item => (
        <InformationRow
          key={item.title}
          title={item.title}
          description={
            <TextInformation
              description={item.description}
              slotProps={{ seeMoreText: { lines: 5 } }}
              sx={{
                maxWidth: '70%',
                textAlign: 'right',
                '& button': {
                  alignSelf: 'end',
                  '&:hover': { backgroundColor: 'transparent' },
                },
              }}
            />
          }
        />
      ))}
    </RevisionAccordion>
  );
};

export default RevisionBasicConfiguration;