import type { ComponentProps } from 'react'

import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

import { useToggle } from 'hooks/useToggle'

import { Input } from '../Input'

const VisibilityButton = styled.button`
  border: none;
  background: none;
  background-color: transparent;
  padding: 0;

  display: flex;
  cursor: pointer;
  width: 50px;
  height: 100%;
  opacity: 0.4;
  transition: background-color 0.3s;
  :hover {
    background-color: rgba(255, 255, 255, 0.22);
  }

  ::after {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(/images/visibility.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 15px;
  }

  ${isMobileDevice
    ? css`
        position: unset;
        width: 50px;
        height: 100%;
      `
    : ''};
`

type Props = ComponentProps<typeof Input>

export const PasswordInput = ({
  autoComplete,
  className,
  leftContent,
  name,
  onBlur,
  onChange,
  onFocus,
  placeholder,
  placeholderLexic,
  value,
}: Props) => {
  const { isOpen: showPassword, toggle } = useToggle()
  return (
    <Input
      autoComplete={autoComplete}
      className={className}
      onBlur={onBlur}
      onChange={onChange}
      onFocus={onFocus}
      placeholder={placeholder}
      placeholderLexic={placeholderLexic}
      value={value}
      name={name}
      type={showPassword ? 'text' : 'password'}
      leftContent={leftContent}
      rightContent={<VisibilityButton type='button' onClick={toggle} />}
    />
  )
}