import React from 'react';
import { FormGroup, Label } from 'reactstrap';
import { makeStyles } from 'tss-react/mui';
import { useAppSelector } from '@/lib/redux/hooks';
import { getInputSettings } from '@/lib/redux/features/serviceAdmin';
import { useTranslations } from 'use-intl';
import { Input } from 'antd';
import AppButton from '../button/app-button';
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 = {
    ref?: any;
    type?: InputType;
    label?: string;
    placeholder?: string;
    disabled?: boolean;
    col?: number;
    name?: string;
    value?: any;
    min?: number;
    max?: number;
    onChange?: any;
    fontSize?: any;
    style?: any;
    rightButtonLabel?: string;
    onRightButtonClick?: () => void;
    isCancel?: boolean;
    disabledButton?: boolean;
    maxLength?: number;
    colorButton?: "black" | "info" | "success" | "danger" | "warning" | "megre";
}

type MakeStylesType = {
    inputSetting: any;
    type: any;
    fontSize: any;
}
const useStyle = makeStyles<MakeStylesType>()((theme, { inputSetting, type, fontSize }) => {
    
    return ({
        inputWrapper: {
            display: 'flex',
            alignItems: 'center',
            width: '100%',
        },
        button: {
            height: inputSetting.height || '38px',
            minHeight: inputSetting.height || undefined,
            maxHeight: inputSetting.height || '38px',
        },
        unPaddingTop: {
            paddingTop: 0
        },
        inputBox: {
            alignItems: 'center',
            display: 'flex',
            flexDirection: 'row',
            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 InputFieldButtonRight = (props: PropsType) => {
    const {
        type, label, placeholder, disabled, name, value, style, onRightButtonClick, maxLength, colorButton,
        min, max, onChange, fontSize, ref, rightButtonLabel, isCancel, disabledButton
    } = props;
    
    const t = useTranslations("");
    const inputSetting = useAppSelector(getInputSettings);


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

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

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

    return (
        <div className={`${classes.inputBox}`}>
            {label && <Label
                for={name}
                className={classes.unPaddingTop}
            >{label}</Label>}
            <Input
                ref={ref}
                id={`${name}-${(new Date()).getTime()}`}
                // {...field}
                min={min}
                value={value}
                max={max}
                maxLength={maxLength}
                type={type ? type : 'text'}
                disabled={disabled}
                onPressEnter={()=> onRightButtonClick && onRightButtonClick()}
                size={'large'}
                width={'100%'}
                style={style}
                placeholder={placeholder}
                className={classes.input}
                // addonAfter={<ButtonRight onRightButtonClick={onRightButtonClick} label={rightButtonLabel}/>}
                onChange={(event) => onChange(event.target.value)}
            />
            <AppButton
                className={`text-nowrap ${classes.button}`}
                color={colorButton}
                type="button"
                onClick={onRightButtonClick}
                disabled={disabledButton}
            >
                {rightButtonLabel}
            </AppButton>
        </div>
        // <FormGroup className={`${classes.inputBox} ${col !== 12 && classes.colInput}`}>
            
        // </FormGroup>
    );
};

export default InputFieldButtonRight;

const ButtonRight = (props : { icon?: any; onRightButtonClick: any; label?: string }) => {
  const { icon, onRightButtonClick, label } = props;
  return <AppButton className='text-nowrap' onClick={() => onRightButtonClick()}>
    {
      icon ? icon : null
    }
    {label && <span>{label}</span>}
  </AppButton>
}