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

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

import { type PerformanceReviewCoreFormQuestion } from 'src/pages/dashboard/performance/types';

import GetReviewInputComponent from '../../../components/GetReviewInputComponent';
import { toReviewQuestion } from '../../CalibrationForm/utils';

type SingleQuestionReadOnlyProps = {
  question: PerformanceReviewCoreFormQuestion;
  label: string;
  pillType: 'info' | 'neutral';
};

const SingleQuestionReadOnly = ({
  question,
  label,
  pillType,
}: SingleQuestionReadOnlyProps) => {
  const reviewQuestion = toReviewQuestion(question);

  return (
    <Stack
      sx={{
        flex: 1,
        minWidth: 0,
        gap: 2,
        p: 3,
        borderRadius: '20px',
        border: '1px solid',
        borderColor: 'divider',
        backgroundColor: 'background.paper',
        '& > .MuiStack-root': {
          border: 'none',
          padding: 0,
          borderRadius: 0,
          backgroundColor: 'transparent',
        },
      }}
    >
      <Stack sx={{ flexDirection: 'row', alignItems: 'flex-start' }}>
        <HuPills
          label={label}
          size="medium"
          type={pillType}
          hasIcon={false}
          sx={{ textTransform: 'none' }}
        />
      </Stack>
      <GetReviewInputComponent
        canViewGoalDetails={false}
        answered
        index={0}
        id={reviewQuestion.id}
        title={reviewQuestion.title}
        type={reviewQuestion.type}
        required={reviewQuestion.required}
        commentableStatus={reviewQuestion.commentableStatus}
        answer={reviewQuestion.answer}
        comment={reviewQuestion.comment}
        goal={reviewQuestion.goal}
        competency={reviewQuestion.competency}
        description={reviewQuestion.description || undefined}
        choices={reviewQuestion.choices || undefined}
      />
    </Stack>
  );
};

export default SingleQuestionReadOnly;