import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import { Check, Clear } from '@mui/icons-material';

import {
  DEMAND_TAG_PAGE_BUDGET_PACING_LIST,
  DEMAND_TAG_PAGE_BUDGET_PACING_TYPES,
  DEMAND_TAG_PAGE_BUDGET_TIMEFRAME_LIST,
  DEMAND_TAG_PAGE_BUDGET_TIMEFRAME_TYPES,
  DEMAND_TAG_PAGE_BUDGET_TYPE_LIST,
  DEMAND_TAG_PAGE_BUDGET_TYPES,
} from '@/modules/marketplace/account/constants';

import { integerFieldBlockInvalidChar } from '@/modules/marketplace/account/helpers/validate';

import { Grid, IconButton, MenuItem, Select, TextField } from '@/mui/components';

import styles from './index.module.scss';

function FormLineItem({ className = '', ...props }) {
  const budget = 1;

  const [budget$, setBudget] = useState(budget);
  const [type$, setType] = useState(DEMAND_TAG_PAGE_BUDGET_TYPES.impression);
  const [timeFrame$, setTimeFrame] = useState(DEMAND_TAG_PAGE_BUDGET_TIMEFRAME_TYPES.hourly);
  const [pacing$, setPacing] = useState(DEMAND_TAG_PAGE_BUDGET_PACING_TYPES.even);

  return (
    <Grid
      container
      alignContent="center"
      justifyContent="flex-start"
      className={classNames(className, styles.Container)}
    >
      <Grid item xs={2} className={styles.Item}>
        <TextField
          data-id="budget"
          type="number"
          value={budget$}
          placeholder="Budget"
          inputProps={{
            min: '1',
          }}
          onKeyDown={integerFieldBlockInvalidChar}
          onChange={({ target }) => {
            setBudget(target.value);
          }}
          variant="outlined"
          size="small"
        />
      </Grid>
      <Grid item xs={2} className={styles.Item}>
        <Select
          labelId="type-select-label"
          id="type-select"
          value={type$}
          variant="outlined"
          size="small"
          onChange={({ target }) => {
            setType(target.value);
          }}
        >
          {DEMAND_TAG_PAGE_BUDGET_TYPE_LIST.map((item) => (
            <MenuItem value={item.value} key={item.value}>
              {item.label}
            </MenuItem>
          ))}
        </Select>
      </Grid>
      <Grid item xs={2} className={styles.Item}>
        <Select
          labelId="timeframe-select-label"
          id="timeframe-select"
          value={timeFrame$}
          variant="outlined"
          size="small"
          onChange={({ target }) => {
            setTimeFrame(target.value);
          }}
        >
          {DEMAND_TAG_PAGE_BUDGET_TIMEFRAME_LIST.map((item) => (
            <MenuItem value={item.value} key={item.value}>
              {item.label}
            </MenuItem>
          ))}
        </Select>
      </Grid>
      <Grid item xs={2} className={styles.Item}>
        <Select
          labelId="pacing-select-label"
          id="pacing-select"
          value={pacing$}
          variant="outlined"
          size="small"
          onChange={({ target }) => {
            setPacing(target.value);
          }}
        >
          {DEMAND_TAG_PAGE_BUDGET_PACING_LIST.map((item) => (
            <MenuItem value={item.value} key={item.value}>
              {item.label}
            </MenuItem>
          ))}
        </Select>
      </Grid>
      <Grid item xs={4} className={classNames(styles.Buttons, styles.Item)}>
        <div className={styles.ButtonContainer}>
          <IconButton
            className={styles.Button}
            disabled={
              !budget$ ||
              +budget$ <= 0 ||
              props.checkHasDuplicate({
                type: type$,
                timeFrame: timeFrame$,
                pacing: pacing$,
              }) ||
              (timeFrame$ === DEMAND_TAG_PAGE_BUDGET_TIMEFRAME_TYPES.lifetime &&
                pacing$ === DEMAND_TAG_PAGE_BUDGET_PACING_TYPES.even)
            }
            onClick={() =>
              props.onSubmit({
                budget: budget$,
                type: type$,
                timeFrame: timeFrame$,
                pacing: pacing$,
              })
            }
          >
            <Check />
          </IconButton>
        </div>
        <div className={styles.ButtonContainer}>
          <IconButton className={styles.Button} onClick={() => props.onCancel()}>
            <Clear />
          </IconButton>
        </div>
      </Grid>
    </Grid>
  );
}

FormLineItem.propTypes = {
  className: PropTypes.string,
  onSubmit: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,
  checkHasDuplicate: PropTypes.func.isRequired,
};

export default FormLineItem;
