// containers/home/HomeItem.jsx

/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { Fragment, Component } from 'react';
import Link from 'next/link';
import { Collapse } from 'reactstrap';
import Router from 'next/router';

class HomeItem extends Component {
  constructor(props) {
    super(props);
    const { data } = this.props;
    const collection = data.map(i => {
      if (i.group_child !== null) {
        return i.group_child.map(x => x.id);
      }
    });

    const stripped = collection.filter(Boolean).flat();

    this.state = {
      indexCollapse: stripped
    };
  }

  toggle = groupId => {
    const { indexCollapse } = this.state;

    const indArr = indexCollapse;

    if (!indexCollapse.includes(groupId)) {
      indArr.push(groupId);
      this.setState({
        indexCollapse: indArr
      });
    } else {
      const index = indArr.indexOf(groupId);
      if (index !== -1) indArr.splice(index, 1);
      this.setState({
        indexCollapse: indArr
      });
    }
  };

  handleLink = category => {
    if (process.browser) {
      const path = [
        {
          id: category.id,
          name: category.name
        }
      ];
      localStorage.removeItem('path');
      localStorage.setItem('path', JSON.stringify(path));

      Router.push(`/subcategory/id/${category.id}`);
    }
    console.log('cat', category);
  };

  render() {
    const { dataGroup } = this.props;
    const { indexCollapse } = this.state;
    // console.log('indexCollapse', indexCollapse);
    // // console.log('size', size);

    return (
      <div id="page-content-wrapper" className="pl-3 pr-3 w-100">
        <nav className="navbar navbar-light border-bottom">
          <nav aria-label="breadcrumb" className="d-flex">
            <h5 className="align-self-center">{dataGroup.name}</h5>
          </nav>
        </nav>

        <div className="container-fluid">
          <div className="row">
            <div className="col-md-12">
              <span>{dataGroup.name}</span>
            </div>
          </div>
          <div className="d-flex flex-wrap">
            {!dataGroup.group_child ? (
              <span className="ml-2 w-100 text-dark font-weight-light">
                No sub group found
              </span>
            ) : (
              dataGroup.group_child.map(group => (
                <Fragment key={group.id}>
                  <span className="w-100 text-dark">
                    <i
                      className="fa fa-caret-right pr-2 text-warning"
                      style={{ cursor: 'pointer' }}
                      onClick={this.toggle.bind(this, group.id)}
                    />
                    {group.name}
                  </span>
                  <Collapse isOpen={indexCollapse.includes(group.id)}>
                    <div
                      className="d-flex flex-wrap"
                      style={{ cursor: 'pointer' }}
                    >
                      {!group.category_child ? (
                        <span className="ml-2 w-100 text-dark font-weight-light">
                          No category found...
                        </span>
                      ) : (
                        group.category_child.map(category => (
                          <div
                            // href="/subcategory/id/[id]"
                            onClick={() => {
                              this.handleLink(category);
                            }}
                            // as={`/subcategory/id/${category.id}&path=[{"id":"${category.id}","name":"${category.name}"}]`}
                            key={category.id}
                          >
                            <div className="product-listing mt-5 mr-2">
                              <div className="thumb-wrapper w-100">
                                <img src={category.picture.path} alt="" />
                              </div>
                              <div className="desc">{category.name}</div>
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  </Collapse>
                </Fragment>
              ))
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default HomeItem;