import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import { Check, Clear, Delete, Edit } 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,
} from '@/modules/marketplace/account/constants';

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

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

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

function LineItem({
  className = '',
  isLabelRow = false,
  pacing = '',
  onSubmit = () => null,
  onDelete = () => null,
  ...props
}) {
  const initType = props.type;
  const initTimeFrame = props.timeFrame;
  const initPacing = pacing;

  const [isEdit, setEditState] = useState(false);
  const [budget$, setBudget] = useState(props.budget);
  const [type$, setType] = useState(initType);
  const [timeFrame$, setTimeFrame] = useState(initTimeFrame);
  const [pacing$, setPacing] = useState(initPacing);

  const onCancel = () => {
    setBudget(props.budget);
    setType(initType);
    setTimeFrame(initTimeFrame);
    setPacing(initPacing);
  };

  const isDuplicateItem = (record) => {
    if (initType === record.type && initTimeFrame === record.timeFrame && initPacing === record.pacing) {
      return false;
    }

    return props.checkHasDuplicate(record);
  };

  return (
    <Grid
      container
      alignContent="center"
      justifyContent="flex-start"
      className={classNames(className, styles.Container, {
        [styles.Container___label]: isLabelRow,
        [styles.Container___edit]: isEdit,
      })}
    >
      <Grid item xs={2} className={styles.Item}>
        {!isEdit ? (
          props.budget
        ) : (
          <TextField
            data-id="budget"
            type="number"
            size="small"
            placeholder="Budget"
            value={budget$}
            inputProps={{
              min: '1',
            }}
            onKeyDown={integerFieldBlockInvalidChar}
            onChange={({ target }) => setBudget(target.value)}
            variant="outlined"
          />
        )}
      </Grid>
      <Grid item xs={2} className={styles.Item}>
        {!isEdit ? (
          getLabelByValue(DEMAND_TAG_PAGE_BUDGET_TYPE_LIST, props.type) || props.type
        ) : (
          <Select
            labelId="type-select-label"
            id="type-select"
            value={type$}
            size="small"
            variant="outlined"
            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}>
        {!isEdit ? (
          getLabelByValue(DEMAND_TAG_PAGE_BUDGET_TIMEFRAME_LIST, props.timeFrame) || props.timeFrame
        ) : (
          <Select
            labelId="timeframe-select-label"
            id="timeframe-select"
            value={timeFrame$}
            size="small"
            variant="outlined"
            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}>
        {!isEdit ? (
          getLabelByValue(DEMAND_TAG_PAGE_BUDGET_PACING_LIST, pacing) || pacing
        ) : (
          <Select
            labelId="pacing-select-label"
            id="pacing-select"
            value={pacing$}
            size="small"
            variant="outlined"
            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>
      {!isLabelRow && (
        <Grid item xs={4} className={classNames(styles.Buttons, styles.Item)}>
          {!isEdit && (
            <>
              <div className={styles.ButtonContainer}>
                <IconButton
                  className={classNames(styles.Button, styles.ButtonEdit)}
                  size="small"
                  onClick={() => {
                    setEditState(true);
                  }}
                >
                  <Edit />
                </IconButton>
              </div>
              <div className={styles.ButtonContainer}>
                <IconButton
                  size="small"
                  className={classNames(styles.Button, styles.ButtonEdit)}
                  onClick={() => onDelete(props.id)}
                >
                  <Delete />
                </IconButton>
              </div>
            </>
          )}
          {isEdit && (
            <>
              <div className={styles.ButtonContainer}>
                <IconButton
                  className={styles.Button}
                  disabled={
                    !budget$ ||
                    +budget$ <= 0 ||
                    isDuplicateItem({
                      type: type$,
                      timeFrame: timeFrame$,
                      pacing: pacing$,
                    }) ||
                    (timeFrame$ === DEMAND_TAG_PAGE_BUDGET_TIMEFRAME_TYPES.lifetime &&
                      pacing$ === DEMAND_TAG_PAGE_BUDGET_PACING_TYPES.even)
                  }
                  onClick={() => {
                    setEditState(false);
                    onSubmit({
                      id: props.id,
                      budget: budget$,
                      type: type$,
                      timeFrame: timeFrame$,
                      pacing: pacing$,
                    });
                  }}
                >
                  <Check />
                </IconButton>
              </div>
              <div className={styles.ButtonContainer}>
                <IconButton
                  className={styles.Button}
                  onClick={() => {
                    setEditState(false);
                    onCancel();
                  }}
                >
                  <Clear />
                </IconButton>
              </div>
            </>
          )}
        </Grid>
      )}
    </Grid>
  );
}

LineItem.propTypes = {
  id: PropTypes.string.isRequired,
  budget: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  timeFrame: PropTypes.string.isRequired,
  pacing: PropTypes.string,
  className: PropTypes.string,
  isLabelRow: PropTypes.bool,
  onSubmit: PropTypes.func,
  onDelete: PropTypes.func,
  checkHasDuplicate: PropTypes.func.isRequired,
};

export default LineItem;
