import { type FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import {
  DynamicFormType,
  type FormSection,
  type Task,
} from 'src/pages/dashboard/serviceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import PdfFormAnswer from './FormAnswer/PdfFormAnswer';
import RegularFormAnswer from './FormAnswer/RegularFormAnswer';

export type FormAnswerProps = {
  formData?: FormSection | null;
  taskData?: Task;
  loading: boolean;
  isAgentSide: boolean;
};

const FormAnswer: FC<FormAnswerProps> = ({
  formData,
  taskData,
  loading = false,
  isAgentSide = false,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  const showPdfFormAnswer =
    !loading &&
    !!formData &&
    formData.form?.type === DynamicFormType.PDF &&
    !!taskData;

  const showRegularFormAnswer =
    !loading && !!formData && formData.form?.type === DynamicFormType.REGULAR;

  return (
    <Stack
      sx={{
        height: '100%',
        overflow: 'auto',
        gap: 2,
        p: 1,
        pl: 0.5,
        scrollbarWidth: 'thin',
        scrollbarColor: 'rgba(0, 0, 0, 0.2) transparent',
      }}
    >
      {!isAgentSide && loading && (
        <Stack
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.layout.default,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            borderRadius: 1,
            gap: 1,
            m: 1,
            ml: 2,
            p: 2,
          }}
        >
          <HuSkeleton
            variant="text"
            width="100%"
            height={40}
          />
          <HuSkeleton
            variant="rounded"
            width={20}
            height={20}
          />
        </Stack>
      )}
      {!isAgentSide && !loading && (
        <HuAccordion
          title={t('service_information')}
          elevation={0}
          defaultExpanded={true}
          customDetail={
            <Stack sx={{ gap: 2 }}>
              <Stack
                sx={{
                  p: 2,
                  borderRadius: 1,
                  backgroundColor: theme =>
                    theme.palette.new.background.layout.default,
                }}
              >
                <Typography
                  variant="globalS"
                  sx={{ wordBreak: 'break-word' }}
                >
                  {taskData?.catalogItem?.description}
                </Typography>
              </Stack>
              {taskData?.catalogItem?.category && (
                <Stack
                  sx={{
                    p: 2,
                    borderRadius: 1,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    backgroundColor: theme =>
                      theme.palette.new.background.layout.default,
                  }}
                >
                  <Typography
                    variant="globalS"
                    fontWeight="semiBold"
                  >
                    {t('category')}
                  </Typography>
                  <Typography variant="globalS">
                    {taskData?.catalogItem?.category?.name}
                  </Typography>
                </Stack>
              )}
            </Stack>
          }
        />
      )}
      <Stack sx={{ p: 1, pl: 2, gap: 2 }}>
        <Typography
          variant="globalM"
          fontWeight="fontWeightSemiBold"
        >
          {t('submitted_form')}
        </Typography>
        <Stack
          sx={{
            overflow: 'auto',
            gap: 2,
            scrollbarWidth: 'thin',
            scrollbarColor: 'rgba(0, 0, 0, 0.2) transparent',
          }}
        >
          {loading && (
            <Stack
              sx={{
                backgroundColor: theme =>
                  theme.palette.new.background.layout.default,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                borderRadius: 1,
                gap: 1,
                p: 2,
              }}
            >
              <HuSkeleton
                variant="text"
                width="100%"
                height={40}
              />
              <HuSkeleton
                variant="rounded"
                width={20}
                height={20}
              />
            </Stack>
          )}
          {showRegularFormAnswer && <RegularFormAnswer formData={formData} />}
          {showPdfFormAnswer && (
            <PdfFormAnswer
              formData={formData}
              taskData={taskData}
            />
          )}
        </Stack>
      </Stack>
    </Stack>
  );
};

export default FormAnswer;
