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

import { Checkbox, Grid, IconButton, InputAdornment, TextField, Typography } from '@/mui/components';

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

// todo: fix layout Replace Grid to Stack
function LineItem({
  className = '',
  isLabelRow = false,
  checked = false,
  hasItems = false,
  onSelect = () => null,
  onSubmit = () => null,
  onRemove = () => null,
  ...props
}) {
  const [isEdit, setEditState] = useState(false);
  const [name$, setName] = useState(props.name);

  return (
    <Grid
      container
      alignContent="center"
      justifyContent="flex-start"
      className={classNames(className, styles.Container, {
        [styles.Container___label]: isLabelRow,
        [styles.Container___edit]: isEdit,
        [styles.Container___checked]: checked,
      })}
    >
      <Grid container item xs={11}>
        <Grid item xs={1} className={styles.Item}>
          <Checkbox
            disabled={isEdit || (isLabelRow && !hasItems)}
            checked={checked}
            onChange={({ target }) => onSelect({ checked: target.checked, id: props.id })}
          />
        </Grid>
        <Grid item xs={1} className={styles.Item}>
          <Typography variant={isLabelRow ? 'subtitle2' : 'body2'}>{props.id}</Typography>
        </Grid>
        <Grid item xs={10} className={styles.Item}>
          {!isEdit ? (
            <Typography className={styles.Name} variant={isLabelRow ? 'subtitle2' : 'body2'}>
              {props.name}
            </Typography>
          ) : (
            <TextField
              data-id="name"
              value={name$}
              placeholder="Domain"
              onChange={({ target }) => setName(target.value)}
              variant="outlined"
              size="small"
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton
                      size="small"
                      disabled={!name$}
                      onClick={() => {
                        setEditState(false);
                        onSubmit({
                          id: props.id,
                          name: name$,
                        });
                      }}
                    >
                      <Check />
                    </IconButton>
                    <IconButton
                      size="small"
                      onClick={() => {
                        setEditState(false);
                        setName(props.name);
                      }}
                    >
                      <Clear />
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
          )}
        </Grid>
      </Grid>
      {!isLabelRow && (
        <Grid item xs={1} className={classNames(styles.Buttons, styles.Item)}>
          {!isEdit && (
            <>
              <div className={styles.ButtonContainer}>
                <IconButton
                  className={styles.ButtonEdit}
                  size="small"
                  onClick={() => {
                    setEditState(true);
                  }}
                >
                  <Edit />
                </IconButton>
              </div>
              <div className={styles.ButtonContainer}>
                <IconButton
                  className={styles.ButtonEdit}
                  size="small"
                  onClick={() => {
                    onRemove({
                      id: props.id,
                    });
                  }}
                >
                  <Clear />
                </IconButton>
              </div>
            </>
          )}
        </Grid>
      )}
    </Grid>
  );
}

LineItem.propTypes = {
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  className: PropTypes.string,
  isLabelRow: PropTypes.bool,
  checked: PropTypes.bool,
  hasItems: PropTypes.bool,
  onSelect: PropTypes.func,
  onSubmit: PropTypes.func,
  onRemove: PropTypes.func,
};

export default LineItem;
