import { memo } from 'react';
import clsx from 'clsx';

import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import type { TextFieldProps } from '@mui/material/TextField';

import { ASSETS_URL } from '../../consts/common';
import { CustomIcon } from '../custom-icon';
import createClasses from './styles';

export interface RangeFieldProps {
  fromFieldProps?: TextFieldProps;
  toFieldProps?: TextFieldProps;
  handleClear: () => void;
  /**
   * Default classes overrides.
   */
  classes?: Partial<ReturnType<typeof createClasses>>;
}

const RangeField = (props: RangeFieldProps) => {
  const { fromFieldProps, toFieldProps, handleClear, classes } = props;

  const styles = createClasses();

  return (
    <Box display="flex" alignItems="center">
      <TextField
        type="number"
        size="small"
        InputProps={{
          classes: {
            input: clsx(styles.input, classes?.input)
          }
        }}
        {...fromFieldProps}
      />
      <Typography className={clsx(styles.dash, classes?.dash)} color="primary">
        -
      </Typography>
      <TextField
        size="small"
        type="number"
        InputProps={{
          classes: {
            input: clsx(styles.input, classes?.input)
          }
        }}
        {...toFieldProps}
      />
      <IconButton
        size="small"
        onClick={handleClear}
        className={clsx(styles.button, classes?.button)}
      >
        <CustomIcon
          color="inherit"
          src={`${ASSETS_URL}/icons/icon_closeCircle.svg`}
          className={clsx(styles.icon, classes?.icon)}
        />
      </IconButton>
    </Box>
  );
};

RangeField.defaultProps = {
  fromFieldProps: {
    placeholder: 'From'
  },
  toFieldProps: {
    placeholder: 'To'
  }
};

const m = memo(RangeField);
export { m as RangeField };