import React from 'react';
import styled from 'styled-components';
import { LoaderIcon } from '../../LoaderIcon';
import { ViewPasswordToggle } from '../Input';
import { ICustomInputProps } from '../InputCore.interface';

export const Style = styled.div<any>`
   .input-field {
      position: relative;
      height: 40px;
      line-height: 0px;
      border-bottom: 2px solid #555;
      transition: 0.2s all;

      input {
         height: 40px;
         line-height: 0px;
         border: none;
         background: transparent;
         width: 100%;

         &:valid ~ .title {
            transform: translateY(-24px);
         }
      }

      .title {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         color: #555;
         transition: 0.2s all;
         cursor: text;
         pointer-events: none;
         height: 40px;
         line-height: 40px;
      }

      &.focus {
         border-bottom: 2px solid #19c632;

         .title {
            font-size: 14px;
            transform: translateY(-24px);
            color: #19c632;
         }
      }
   }
`;

export function CustomComponentInput({
   inputProps,
   title,
   prefix,
   suffix,
   error,
   focus,
   loading,
   password,
   hidePassword,
   setHidePassword,
}: ICustomInputProps): any {
   return (
      <Style>
         <div className={`input-field ${focus && 'focus'}`}>
            {prefix && <div className="prefix">{prefix}</div>}
            <input {...inputProps} required />
            <label className="title">{title}</label>
            {loading && (
               <div className="suffix suffix-loading">
                  <LoaderIcon size={18} />
               </div>
            )}
            {suffix && <div className="suffix">{suffix}</div>}
            {password && <ViewPasswordToggle hidePassword={hidePassword} setHidePassword={setHidePassword} />}
         </div>

         {error && (
            <div className="error-input" data-testid="input-error">
               {error}
            </div>
         )}
      </Style>
   );
}
