import { FC } from 'react';

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

import { OPTION_ICONS } from './constants';
import { Option, FormOptionsTypes } from './types';

export type OptionReadOnlyProps = {
  option: Option;
  index: number;
  type?: FormOptionsTypes;
  color?:
    | 'primary'
    | 'secondary'
    | 'error'
    | 'info'
    | 'success'
    | 'warning'
    | 'default';
};

export const OptionReadOnly: FC<OptionReadOnlyProps> = props => {
  const {
    option: { value, checked },
    index,
    type = FormOptionsTypes.RADIO,
    color = 'primary',
  } = props;

  const Icon = checked ? OPTION_ICONS[type].Icon : OPTION_ICONS[type].BlankIcon;

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        width: '100%',
        py: 1,
        px: 0.5,
      }}
    >
      {Icon && (
        <Icon
          fontSize="small"
          color={checked ? color : undefined}
          sx={{
            mr: 1,
          }}
        />
      )}
      {!Icon && (
        <Typography
          variant="body2"
          color="gray"
          sx={{
            width: '15px',
            mr: 1,
          }}
        >
          {index + 1}
        </Typography>
      )}
      <Typography variant="body1">{value}</Typography>
    </Stack>
  );
};

export default OptionReadOnly;