import React from 'react';
import { Avatar } from '@mui/material';
import Close16 from '@lunit/design-system-icons/Close16';
import {
  StyledOutlinedChip,
  StyledContainedChipBase,
  StyledContainedChipEnable,
  StyledContainedChipDeletable,
} from './Chip.styled';

import type {
  OutlinedChipProps,
  ReadOnlyContainedChipProps,
  EnableContainedChipProps,
  DeletableContainedChipProps,
  ChipProps,
  ChipType,
  ChipThumbnail,
} from './Chip.types';

const OutlinedChip = (props: OutlinedChipProps) => {
  const { color = 'primary', ...restProps } = props;

  return <StyledOutlinedChip {...restProps} variant="outlined" disabled color={color} />;
};

/**
 * Conditional styling for contained chip
 */
const getAvatar = (thumbnail: ChipThumbnail | undefined) => {
  if (!thumbnail || typeof thumbnail !== 'string') return;
  if (thumbnail.length === 0) return <Avatar />;
  return <Avatar>{thumbnail.slice(0, 1).toLocaleUpperCase()}</Avatar>;
};
const getIcon = (thumbnail: ChipThumbnail | undefined) => {
  if (thumbnail && typeof thumbnail !== 'string') return thumbnail;
  return undefined;
};
const getLabelMargin = (thumbnail: ChipThumbnail | undefined, deletable?: boolean) => {
  return {
    marginLeft: thumbnail ? '0px' : '8px',
    marginRight: deletable ? '0px' : '8px',
  };
};

const ReadOnlyContainedChip = (props: ReadOnlyContainedChipProps) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
  const { color = 'primary', thumbnail, sx, variant, ...restProps } = props;

  return (
    <StyledContainedChipBase
      {...restProps}
      disabled
      avatar={getAvatar(thumbnail)}
      icon={getIcon(thumbnail)}
      color={color}
      sx={{
        '& .MuiChip-label': {
          ...getLabelMargin(thumbnail),
        },
        ...sx,
      }}
    />
  );
};

const EnableContainedChip = (props: EnableContainedChipProps) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
  const { color = 'primary', thumbnail, onClick, variant, ...restProps } = props;

  return (
    <StyledContainedChipEnable
      {...restProps}
      onClick={onClick}
      avatar={getAvatar(thumbnail)}
      icon={getIcon(thumbnail)}
      color={color}
      sx={{
        '& .MuiChip-label': {
          ...getLabelMargin(thumbnail),
        },
      }}
    />
  );
};

const DeleteIconWithHoverLayer = ({ onClick }: { onClick: () => void }) => {
  return (
    <>
      <Close16 />
      <Close16 className="delete-icon-hover-layer" onClick={onClick} />
    </>
  );
};
const DeletableContainedChip = (props: DeletableContainedChipProps) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
  const { color = 'primary', thumbnail, onDelete, sx, variant, ...restProps } = props;

  return (
    <StyledContainedChipDeletable
      {...restProps}
      color={color}
      onDelete={onDelete}
      deleteIcon={<DeleteIconWithHoverLayer onClick={onDelete} />}
      avatar={getAvatar(thumbnail)}
      icon={getIcon(thumbnail)}
      sx={{
        '& .MuiChip-label': {
          ...getLabelMargin(thumbnail, Boolean(onDelete)),
        },
        ...sx,
      }}
    />
  );
};

const Chip: ChipType = (props: ChipProps) => {
  const { kind, variant, onDelete, onClick, ...restProps } = props;

  const isOutlined = kind === 'outlined' || variant === 'outlined';

  if (isOutlined) return <OutlinedChip {...props} />;
  if (onClick) return <EnableContainedChip {...props} />;
  if (onDelete) return <DeletableContainedChip {...props} />;

  return <ReadOnlyContainedChip {...restProps} />;
};

export default Chip;