import React, { FC, useState } from "react";
import { BaseIconProps } from "./index";

interface Props extends BaseIconProps {
  onClick?: (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
}

const TransferDefaultIcon: FC<Props> = props => {
  return (
    <svg width="13" height="14" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg" {...props}>
      <g transform="translate(0 .5)" fill="none" fillRule="evenodd">
        <circle stroke="#007AFF" strokeWidth="1.3" cx="6.5" cy="6.5" r="5.5" />
        <path
          d="M6.65 3.5a.5.5 0 0 1 .5.5v1.85H9a.5.5 0 0 1 .5.5v.3a.5.5 0 0 1-.5.5H7.15V9a.5.5 0 0 1-.5.5h-.3a.5.5 0 0 1-.5-.5V7.15H4a.5.5 0 0 1-.5-.5v-.3a.5.5 0 0 1 .5-.5h1.85V4a.5.5 0 0 1 .5-.5h.3z"
          fill="#007AFF"
        />
      </g>
    </svg>
  );
};

const TransferActiveIcon: FC<Props> = props => {
  return (
    <svg width="13" height="14" viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg" {...props}>
      <g transform="translate(0 .5)" fill="none" fillRule="evenodd">
        <circle stroke="#007AFF" strokeWidth="1.3" fill="#007AFF" cx="6.5" cy="6.5" r="5.5" />
        <path
          d="M6.65 3.5a.5.5 0 0 1 .5.5v1.85H9a.5.5 0 0 1 .5.5v.3a.5.5 0 0 1-.5.5H7.15V9a.5.5 0 0 1-.5.5h-.3a.5.5 0 0 1-.5-.5V7.15H4a.5.5 0 0 1-.5-.5v-.3a.5.5 0 0 1 .5-.5h1.85V4a.5.5 0 0 1 .5-.5h.3z"
          fill="#FFF"
        />
      </g>
    </svg>
  );
};

export const TransferIcon: FC<Props> = props => {
  const [active, setActive] = useState(false);

  return (
    <div
      className="cursor-pointer"
      onMouseOver={() => setActive(true)}
      onMouseLeave={() => setActive(false)}
      onClick={event => props.onClick?.(event)}
    >
      {active ? <TransferActiveIcon /> : <TransferDefaultIcon />}
    </div>
  );
};