import { Form, InputNumber as AntInputNumber } from 'antd';
import { Outlined } from 'client/Components/Spinner';
import styled from 'styled-components';
import { ElementStatus } from 'types/elements';

const { Disabled, Loading } = ElementStatus;

const FormWrapper = styled(Form.Item)`
  ${props =>
    props.withSpinner &&
    `
    .ant-form-item-control-input-content {
      display: grid;
      grid-template-columns: 9fr 1fr;
      align-items: center;            
      gap:2px;
    }
  `}
`;

const InputNumber = ({
  value = 0,
  setCurrentValue,
  status,
  validateStatus,
  message,
  formatter,
  ...props
}) => {
  return (
    <FormWrapper
      validateStatus={validateStatus}
      help={message}
      withSpinner={status === ElementStatus.Loading}
    >
      <AntInputNumber
        {...props}
        parser={value => {
          value = value.replace(/[^0-9.,]+/, '');
          if (value === '') {
            return '0';
          }
          return value;
        }}
        disabled={[Disabled, Loading].includes(status)}
        style={styles}
        onChange={value => setCurrentValue(value)}
        value={value}
      />
      {status === ElementStatus.Loading && Outlined}
    </FormWrapper>
  );
};

const styles = {
  width: '100%',
};

export default InputNumber;
