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

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

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

function FormLineItem({ className = '', ...props }) {
  const [name$, setName] = useState('');

  return (
    <Grid
      container
      alignContent="center"
      justifyContent="flex-start"
      className={classNames(className, styles.Container, styles.Container___edit)}
    >
      <Grid container item xs={11}>
        <Grid item xs={1} className={styles.Item}>
          <Checkbox disabled />
        </Grid>
        <Grid item xs={1} className={styles.Item}>
          <Typography variant="body2">{props.id}</Typography>
        </Grid>
        <Grid item xs={10} className={styles.Item}>
          <TextField
            data-id="name"
            value={name$}
            placeholder="Value"
            onChange={({ target }) => setName(target.value)}
            variant="outlined"
            size="small"
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    size="small"
                    disabled={!name$}
                    onClick={() => {
                      props.onSubmit({
                        id: props.id,
                        name: name$,
                      });
                    }}
                  >
                    <Check />
                  </IconButton>
                  <IconButton size="small" onClick={() => props.onCancel()}>
                    <Clear />
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </Grid>
      </Grid>
    </Grid>
  );
}

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

export default FormLineItem;
