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

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

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

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

function LineItem({ className = '', isLabelRow = false, onSubmit = () => null, onRemove = () => null, ...props }) {
  const initType = props.type;
  const initEvent = props.event;
  const [isEdit, setEditState] = useState(false);
  const [url$, setUrl] = useState(props.url);
  const [type$, setType] = useState(initType);
  const [event$, setEvent] = useState(initEvent);

  return (
    <Grid
      container
      alignContent="center"
      justifyContent="flex-start"
      className={classNames(className, styles.Container, {
        [styles.Container___label]: isLabelRow,
        [styles.Container___edit]: isEdit,
      })}
    >
      <Grid container item xs={11}>
        <Grid item xs={4} className={styles.Item}>
          {!isEdit ? (
            <Typography rows={1} title={props.url}>
              {props.url}
            </Typography>
          ) : (
            <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}>
          {!isEdit ? (
            getLabelByValue(DEMAND_TAG_PAGE_EVENT_TYPES, props.type) || props.type
          ) : (
            <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}>
          {!isEdit ? (
            getLabelByValue(DEMAND_TAG_PAGE_EVENT_LIST, props.event) || props.event
          ) : (
            <Select
              labelId="type-select-label"
              id="type-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>
      {!isLabelRow && (
        <Grid item xs={1} className={classNames(styles.Buttons, styles.Item)}>
          {!isEdit && (
            <>
              <div className={styles.ButtonContainer}>
                <IconButton
                  className={classNames(styles.Button, styles.ButtonEdit)}
                  onClick={() => {
                    setEditState(true);
                  }}
                >
                  <Edit />
                </IconButton>
              </div>
              <div className={styles.ButtonContainer}>
                <IconButton
                  className={classNames(styles.Button, styles.ButtonEdit)}
                  onClick={() => {
                    onRemove({
                      id: props.id,
                    });
                  }}
                >
                  <Delete />
                </IconButton>
              </div>
            </>
          )}
          {isEdit && (
            <>
              <div className={styles.ButtonContainer}>
                <IconButton
                  className={styles.Button}
                  disabled={!url$}
                  onClick={() => {
                    setEditState(false);
                    onSubmit({
                      id: props.id,
                      url: url$,
                      event: event$,
                      type: type$,
                    });
                  }}
                >
                  <Check />
                </IconButton>
              </div>
              <div className={styles.ButtonContainer}>
                <IconButton
                  className={styles.Button}
                  onClick={() => {
                    setEditState(false);
                    setUrl(props.url);
                    setType(initType);
                    setEvent(initEvent);
                  }}
                >
                  <Clear />
                </IconButton>
              </div>
            </>
          )}
        </Grid>
      )}
    </Grid>
  );
}

LineItem.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  url: PropTypes.string.isRequired,
  event: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  className: PropTypes.string,
  isLabelRow: PropTypes.bool,
  onSubmit: PropTypes.func,
  onRemove: PropTypes.func,
};

export default LineItem;
