import React from 'react';

import { IconWrapper, ClickZone } from './styled';
import data from './data';

type Props = {
  id?: string;
  glyph: string;
  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  onBlur?: () => void;
  style?: Record<string, string>;
  isActive?: boolean;
  isDisabled?: boolean;
};

const Icon: React.FC<Props> = ({
  glyph,
  id,
  onClick,
  onBlur,
  style,
  isActive,
  isDisabled,
}: Props) => {
  const { Normal, Hover } = data[glyph];

  return (
    <IconWrapper isHover={!!Hover} style={style} isDisabled={isDisabled}>
      {Normal && <Normal data-status="normal" />}
      {Hover && <Hover data-status="hover" />}
      {isActive && Hover ? <Hover data-status="active" /> : null}
      <ClickZone
        id={id}
        onClick={
          isDisabled
            ? (): void => {
                // do something
              }
            : onClick
        }
        onMouseDown={(e) => {
          e.preventDefault();
        }}
        onBlur={onBlur}
      />
    </IconWrapper>
  );
};

Icon.defaultProps = {
  id: '',
  onClick: () => {
    // do something
  },
  onBlur: () => {
    // do something
  },
  style: {},
  isActive: false,
  isDisabled: false,
};

export default Icon;