import Chip from '@design-system/Chip';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { IconChevronRight } from '@tabler/icons-react';

import useProfileDataDrawer from '../useProfileDataDrawer';

import { type ProfileListFieldRowProps } from './types';

const ProfileListFieldRow = ({ field, texts }: ProfileListFieldRowProps) => {
  const { openDrawer } = useProfileDataDrawer(field, texts);

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 2,
        m: -1,
        p: 1,
        '&:hover': {
          background: theme => theme.palette.action.hover,
          cursor: 'pointer',
        },
      }}
      onClick={() => openDrawer()}
    >
      <Stack sx={{ width: 0, flex: 1, overflow: 'hidden' }}>
        <Typography
          variant="globalXXS"
          sx={{
            color: ({ palette }) => palette.new.text.neutral.lighter,
            mb: 1,
          }}
        >
          {field.name}
        </Typography>
        <Stack
          sx={{
            flexDirection: 'row',
            gap: 0.5,
            alignItems: 'center',
            overflow: 'hidden',
          }}
        >
          {field.value.map((item, index) => (
            <Chip
              key={`${item}|${index}`}
              label={item}
              size="small"
              sx={{ pointerEvents: 'none' }}
            />
          ))}
        </Stack>
      </Stack>
      <Stack sx={{ flexShrink: 0, p: 1 }}>
        <IconChevronRight size={24} />
      </Stack>
    </Stack>
  );
};

export default ProfileListFieldRow;