import React, { forwardRef } from 'react';
import Input, { InputRef } from 'antd/es/input';
import { makeStyles } from 'tss-react/mui';
import { useAppSelector } from '@/lib/redux/hooks';
import { getInputSettings } from '@/lib/redux/features/serviceAdmin';

type InputProps = {
  inputType?: 'default' | 'search' | 'password' | 'otp';
  size?: 'large' | 'middle' | 'small';
  prefix?: React.ReactNode;
  placeholder?: string;
  value?: string;
  allowClear?: boolean;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSearch?: (value: string) => void;
  onClick?: any;
  disabled?: boolean;
};

const { Search, Password } = Input;

type MakeStylesType = {
  inputSetting: any;
  inputType: any;
}
const useStyle = makeStyles<MakeStylesType>()((theme, { inputSetting, inputType }) => {
      
  return ({
    // unPaddingTop: {
    //   paddingTop: 0
    // },
    // inputBox: {
    //   alignItems: 'center',
    //   display: 'flex',
    //   flexDirection: 'row',
    //   flexWrap: 'wrap',
    //   margin: 0,
    //   '& label': {
    //     minWidth: 100,
    //     paddingRight: '0.5rem',
    //     margin: 0,
    //     wordBreak: 'break-all'
    //   }
    // },
    // colInput: {
    //   // alignItems: 'flex-start',
    //   // flexDirection: 'column',
    //   // justifyContent: 'center'
    // },
    input: {
      minWidth: 150,
      flex: '1 0 100%',
      margin: '0.5rem 0 0.5rem 0',
      color: inputSetting.color,
      fontSize: inputSetting.fontSize || '',
      height: inputSetting.height || '38px',
      minHeight: inputSetting.height || undefined,
      maxHeight: inputSetting.height || '38px',
      boxShadow: 'none!important',
      backgroundColor: inputSetting.backgroundColor,
      borderColor: inputSetting.borderColor ? `${inputSetting.borderColor}` : '#ced4da',
      '& .ant-input-wrapper': {
        borderRadius: inputType === 'search' ? '4px !important' : '',
      },
      '&.ant-input-affix-wrapper': {
        borderRadius: inputType === 'password' ? '0 !important' : '',
      },
      // padding: '6px 12px',
      '&:hover, &:focus, &:active': {
        color: inputSetting.hoverColor,
        backgroundColor: inputSetting.hoverBackgroundColor,
        borderColor: inputSetting.hoverBorderColor
          ? `${inputSetting.hoverBorderColor}`
          : inputSetting.borderColor
            ? `${inputSetting.borderColor}`
            : '#ced4da'
      }
    }
  });
});

const AppInput = forwardRef<InputRef, InputProps>(({
  placeholder = 'Enter text',
  onChange,
  onClick,
  value,
  allowClear = false,
  inputType = 'default',
  size = 'middle',
  prefix,
  onSearch,
  disabled = false,
  ...props
}, ref) => {
  const inputProps = {
    placeholder,
    onClick,
    onChange,
    value,
    allowClear,
    size,
    prefix,
    disabled,
    ...props,
  };
  
    const inputSetting = useAppSelector(getInputSettings);
  
  
    const { classes } = useStyle({ inputSetting, inputType });

  switch (inputType) {
    case 'search':
      return <Search ref={ref} {...inputProps} className={classes.input} onSearch={onSearch} />;
    case 'password':
      return <Password ref={ref} className={classes.input} {...inputProps} />;
    case 'otp':
      return <Input ref={ref} className={classes.input} {...inputProps} maxLength={6} onClick={onClick}/>;
    default:
      return <Input ref={ref} className={classes.input} {...inputProps} onChange={onChange} onClick={onClick}/>;
  }
});

AppInput.displayName = 'AppInput';

export default AppInput;