import * as React from 'react';
import styled from 'styled-components';

import Colors from '../Colors';

const Eye = styled.svg<{ passwordType: boolean; css?: string; onClick: (any?: any) => any}>`
  position: absolute;
  top: 0;
  right: 0;
  height: 25px;
  fill:none;
  stroke: ${Colors.lochmara};
  stroke-width: 2px;
  padding: 2px;
  z-index: 2;

  ${({ passwordType }) => !passwordType ? `
    .eye-opened  {
      transform: scale(0);
      transition: transform 0.5s ease;
      transform-origin: center;
      stroke: none;
      fill: ${Colors.lochmara};
    }

    .eye-closed  {
      transform: scale(1);
      transition: transform 0.5s ease;
      transform-origin: center;
      stroke: 2px;
      fill: none;
    }
  ` : `
  .eye-closed  {
      transform: scale(0);
      transition: transform 0.5s ease-in-out;
      transform-origin: center;
      stroke: 2px;
      fill: none;
    }
    .eye-opened  {
      transform: scale(1);
      transition: transform 0.5s ease-in-out;
      transform-origin: center;
      stroke: none;
      fill: #0077c8;
    }
  `}

  &:hover {
    cursor: pointer;
    // .eye-stroke {
    //   transition: transform 0.5s ease;
    //   stroke: #003C64;
    // }
  }
`;

export default ({ onClick }: { onClick: (event?: any) => any }) => {
  const [passwordType, setPasswordType ] = React.useState(false);
  const onSetPasswordType = () => {
    setPasswordType(!passwordType);
    onClick(!passwordType);
  };

  return (
    <Eye onClick={onSetPasswordType} passwordType={!passwordType} viewBox='0 0 22 20.4'>
      <path className='eye-stroke' d='M20.5 10.2s-4.3 6.5-9.5 6.5-9.5-6.5-9.5-6.5S5.8 3.7 11 3.7s9.5 6.5 9.5 6.5z'/>
      <path className='eye-closed' d='M8.4 12.7l5.2-5'/>
      <ellipse className='eye-opened' cx='11' cy='10.2' rx='3.6' ry='3.5'/>
    </Eye>
  );
};