import React from 'react';
import { FormGroup, Label, FormFeedback } from 'reactstrap';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { useAppSelector } from '@/lib/redux/hooks';
import { getInputSettings } from '@/lib/redux/features/serviceAdmin';
import SearchOutlined from "@ant-design/icons/SearchOutlined";
import { useTranslations } from 'use-intl';
import { Input } from 'antd';
type InputType =
  | 'text'
  | 'email'
  | 'select'
  | 'file'
  | 'radio'
  | 'checkbox'
  | 'switch'
  | 'textarea'
  | 'button'
  | 'reset'
  | 'submit'
  | 'date'
  | 'datetime-local'
  | 'hidden'
  | 'image'
  | 'month'
  | 'number'
  | 'range'
  | 'search'
  | 'tel'
  | 'url'
  | 'week'
  | 'password'
  | 'datetime'
  | 'time'
  | 'color';
type PropsType = {
  type?: InputType;
  label?: string;
  placeholder?: string;
  disabled?: boolean;
  col?: number;
  name?: string;
  value?: any;
  min?: number;
  max?: number;
  onChange?: any;
  fontSize?: any;
  style?: any;
  onSearch?: () => void;
}
type MakeStylesType = {
  inputSetting: any;
  fontSize: any;
  type: any;
}

const useStyle = makeStyles<MakeStylesType>()((theme, { inputSetting, fontSize, type }) => {
  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 || 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',
      padding: type === 'search' ? '' : '6px 12px',
      '& input': {
        borderRadius: type === 'search' ? '8px 0 0 8px !important' : '0',
      },
      '&:hover, &:focus, &:active': {
        color: inputSetting.hoverColor,
        backgroundColor: inputSetting.hoverBackgroundColor,
        borderColor: inputSetting.hoverBorderColor
          ? `${inputSetting.hoverBorderColor}`
          : inputSetting.borderColor
            ? `${inputSetting.borderColor}`
            : '#ced4da'
      }
    }
  });
});
const InputField = (props: PropsType) => {
  const {
    type, label, placeholder, disabled, col, name, value, style, onSearch,
    min, max, onChange, fontSize
  } = props;
  
  const t = useTranslations("");
  const inputSetting = useAppSelector(getInputSettings);

  const { classes } = useStyle({ inputSetting, fontSize, type });

  // const handleChangeInput = (value: any) => {
  //   // const changeEvent = {
  //   //   target: {
  //   //     name: name,
  //   //     value: value
  //   //   }
  //   // };
  //   // onChange(changeEvent);

  //   onChange && onChange(value);
  // };

  return (
    <FormGroup className={`${classes.inputBox} ${col !== 12 && classes.colInput}`}>
      {label && <Label
        for={name}
        className={classes.unPaddingTop}
      >{label}</Label>}
      <Input
        id={`${name}-${(new Date()).getTime()}`}
        // {...field}
        min={min}
        value={value}
        max={max}
        type={type ? type : 'text'}
        disabled={disabled}
        onPressEnter={()=> onSearch && onSearch()}
        size={'large'}
        width={'100%'}
        style={style}
        placeholder={placeholder}
        className={classes.input}
        addonAfter={type === 'search' ? <IconRight onSearch={onSearch}/> : null}
        onChange={(event) => onChange(event.target.value)}
        // invalid={showError}
      />
    </FormGroup>
  );
};

export default InputField;

const IconRight = (props : { icon?: any; onSearch: any }) => {
  const { icon, onSearch } = props;
  return <div style={{ cursor: 'pointer' }} onClick={() => onSearch()}>
    {
      icon
      ? icon
      : <SearchOutlined />
    }
  </div>
}