import { Component } from 'react';
import { connect } from 'react-redux';
import { ActionTile } from '../tiles';
import { createCategory as createCategoryThunk } from '../../store/categorySlice';
import CategoryNameDialog from './CategoryNameDialog';

class NewCategoryTile 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({ name }) {
    const { parentId } = this.props;
    await this.props.createCategory({ parentId, name }).unwrap();
  }

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

    return (
      <>
        <ActionTile
          label="Neue Kategorie"
          disabled={disabled || parentId == null}
          onClick={this.handleOpen}
        />
        <CategoryNameDialog
          open={this.state.open}
          mode="create"
          onClose={this.handleClose}
          onSubmit={this.handleSubmit}
        />
      </>
    );
  }
}

const mapDispatchToProps = {
  createCategory: createCategoryThunk,
};

export default connect(null, mapDispatchToProps)(NewCategoryTile);