"use client";

import { FloatingLabelInputProps } from '#/types';
import React, { useState } from 'react';
import Image from 'next/image';
import { icons } from '#/assets/icons';

export default function FloatingLabelInput({ 
  label, 
  placeholder, 
  type, 
  options,
  button,
  showPasswordToggle = false,
  name,
  defaultValue,
  onChange,
}: FloatingLabelInputProps) {
  const [showPassword, setShowPassword] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const value = e.target.value;
    if (onChange) {
      onChange(value);
    }
  };
  

  const renderInput = () => {
    switch(type) {
      case 'select':
        return (
          <div className="relative w-full">
            <select 
              className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
              name={name}
              defaultValue={defaultValue}
            >
              {options?.map((option, index) => (
                <option key={index} value={option}>{option}</option>
              ))}
            </select>
            {button && <div className="btn-floating-right">{button}</div>}
          </div>
        );
      
      case 'password':
        return (
          <div className="relative w-full">
            <input
              name={name}
              type={showPassword ? "text" : "password"}
              placeholder={placeholder}
              className="input-form focus:ring-2 focus:ring-blue-500 pr-10 outline-none"
              defaultValue={defaultValue}
              
            />
            {showPasswordToggle && (
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="btn-floating-right text-gray-500 hover:text-gray-700 focus:outline-none"
              >
                {showPassword ? (
                  <Image 
                    src={icons.eyeSlashIcon}
                    width={20}
                    height={20}
                    alt=''
                  />
                ) : (
                  <Image 
                    src={icons.eyeIcon}
                    width={20}
                    height={20}
                    alt=''
                  />
                )}
              </button>
            )}
          </div>
        );


        case 'search':
          return (
            <div className="relative w-full">
              <div className='btn-floating-left'>
                <Image alt='' src={icons.searchIcon} />
              </div>
              <input
                type="text"
                placeholder={placeholder}
                className="focus:ring-2 focus:ring-blue-500 outline-none px-10 py-3 w-full text-black border border-[#d1d5dc] rounded-full"
                name={name}
                defaultValue={defaultValue}
                onChange={handleChange}
              />
              {button && <div className="btn-floating-right">{button}</div>}
            </div>
          );
        
      default:
        return (
          <div className="relative w-full">
            <input
              type={type}
              placeholder={placeholder}
              className="input-form focus:ring-2 focus:ring-blue-500 outline-none"
              name={name}
              defaultValue={defaultValue}
              onChange={handleChange}
            />
            {button && <div className="btn-floating-right">{button}</div>}
          </div>
        );
    }
  };

  return (
    <div className="relative">
      <label 
        htmlFor={name}
        className="input-label text-gray-400 text-sm"
      >
        {label}
      </label>
      {renderInput()}
    </div>
  );
}