/* eslint-disable react/jsx-props-no-spreading */
import React, { FunctionComponent } from 'react';
import cn from 'classnames';
import omit from 'lodash/omit';

import { StyledChip } from './styled-components';
import { ChipProps } from './types.d';
import { useTheme } from '../Theme';

/**
 *
 * @param color -  "primaryColor" | "primaryLight" | "secondaryColor" | "white" | "lightGreen" | "gray" | "gray20" | "orange" | "purple" | "yellow" | "pink" | "green" | "blue"
 * @param customColor - only hex colors
 * @returns
 */

export const Chip: FunctionComponent<ChipProps> = (props): React.ReactElement => {
  const { className = '', color = 'primaryColor', customColor, active = false } = props;
  const classNames = cn({
    'square-chip': true,
    [className]: true,
  });

  const theme = useTheme();
  return (
    <StyledChip
      $theme={theme}
      $color={color}
      $customColor={customColor}
      $active={active}
      deleteIcon={
        <div className="delete-icon" style={{ marginRight: '8px' }}>
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M5.94147 4.99996L9.45944 8.52111C9.71967 8.78158 9.71948 9.20369 9.45902 9.46392C9.19855 9.72415 8.77644 9.72396 8.51621 9.46349L4.99797 5.94207L1.47171 9.46309C1.21116 9.72324 0.789052 9.72293 0.528896 9.46239C0.26874 9.20185 0.269054 8.77974 0.529597 8.51958L4.05558 4.99883L0.530807 1.47087C0.270576 1.2104 0.270767 0.788289 0.531234 0.528057C0.791701 0.267825 1.21381 0.268016 1.47404 0.528483L4.99909 4.05672L8.51661 0.544432C8.77715 0.284276 9.19926 0.28459 9.45942 0.545133C9.71957 0.805676 9.71926 1.22779 9.45872 1.48794L5.94147 4.99996Z"
              fill={theme.text.hint}
            />
          </svg>
        </div>
      }
      variant="outlined"
      {...omit(props, 'active')}
      className={classNames}
      color="default"
    />
  );
};
