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_EVENT_LIST, DEMAND_TAG_PAGE_EVENT_TYPES } from '@/modules/marketplace/account/constants';

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

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

function FormLineItem({ className = '', ...props }) {
  const [url$, setUrl] = useState('');
  const [type$, setType] = useState(DEMAND_TAG_PAGE_EVENT_TYPES[0].value);
  const [event$, setEvent] = useState(DEMAND_TAG_PAGE_EVENT_LIST[0].value);

  return (
    <Grid
      container
      alignContent="center"
      justifyContent="flex-start"
      className={classNames(className, styles.Container)}
    >
      <Grid container item xs={11}>
        <Grid item xs={4} className={styles.Item}>
          <TextField
            data-id="url"
            value={url$}
            placeholder="URL"
            onChange={({ target }) => setUrl(target.value)}
            variant="outlined"
            size="small"
          />
        </Grid>
        <Grid item xs={4} 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_EVENT_TYPES.map((item) => (
              <MenuItem value={item.value} key={item.value}>
                {item.label}
              </MenuItem>
            ))}
          </Select>
        </Grid>
        <Grid item xs={4} className={styles.Item}>
          <Select
            labelId="event-select-label"
            id="event-select"
            value={event$}
            variant="outlined"
            size="small"
            onChange={({ target }) => {
              setEvent(target.value);
            }}
          >
            {DEMAND_TAG_PAGE_EVENT_LIST.map((item) => (
              <MenuItem value={item.value} key={item.value}>
                {item.label}
              </MenuItem>
            ))}
          </Select>
        </Grid>
      </Grid>
      <Grid item xs={1} className={classNames(styles.Buttons, styles.Item)}>
        <div className={styles.ButtonContainer}>
          <IconButton
            className={styles.Button}
            disabled={!url$}
            onClick={() => {
              props.onSubmit({
                url: url$,
                event: event$,
                type: type$,
              });
            }}
          >
            <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,
};

export default FormLineItem;
