import { Component } from 'react';
import { ActionTile } from '../tiles';
import categoryAutomat from '../../automats/categoryAutomat';
import ArticleNameDialog from './ArticleNameDialog';

class NewArticleTile extends Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleOpen() {
    this.setState({ open: true });
  }

  handleClose() {
    this.setState({ open: false });
  }

  async handleSubmit({ names }) {
    const { parentId } = this.props;
    const list = (names ?? []).filter(Boolean);
    if (list.length <= 1) {
      const article = await categoryAutomat.actions.createArticle({
        parentId,
        name: list[0] ?? '',
      });
      if (article) {
        this.props.onOpenArticle?.(article);
      }
      return;
    }
    const created = await categoryAutomat.actions.createArticles({ parentId, names: list });
    if (created?.[0]) {
      this.props.onOpenArticle?.(created[0]);
    }
  }

  render() {
    const { parentId, disabled, sx } = this.props;

    return (
      <>
        <ActionTile
          label="Neuer Artikel"
          disabled={disabled || parentId == null}
          onClick={this.handleOpen}
          sx={sx}
        />
        <ArticleNameDialog
          open={this.state.open}
          onClose={this.handleClose}
          onSubmit={this.handleSubmit}
        />
      </>
    );
  }
}

export default NewArticleTile;