import React from 'react'
import cx from 'classnames'
import arrowRight from 'assets/images/arrow_right.svg'
import CheckboxFilled from 'assets/images/checkbox_filled.svg'
import CheckboxIndeterminate from 'assets/images/checkbox_indeterminate.svg'
import CheckboxOutline from 'assets/images/checkbox_outline.svg'
import styles from './TreeSelector.module.scss'

export class TreeSelector extends React.Component {
  constructor() {
    super()
    this.state = {
      expanded: [],
      selected: [],
    }
  }

  getProductSkus = id => {
    const [product] = this.props.products.filter(product => product.id === id)
    return product.skus
  }

  handleParentCheckbox = id => {
    const { selected } = this.state
    const skus = this.getProductSkus(id)
    const varientsSelected = []

    skus.forEach(sku => {
      if (selected.includes(sku.id)) {
        varientsSelected.push(sku.id)
      }
    })

    if (varientsSelected.length !== 0) {
      const checkboxIcon =
        varientsSelected.length === skus.length
          ? CheckboxFilled
          : CheckboxIndeterminate
      return checkboxIcon
    }
    return CheckboxOutline
  }

  handleToggleExpandView = id => {
    const { expanded } = this.state
    if (expanded.includes(id)) {
      this.setState({ expanded: expanded.filter(item => item !== id) })
    } else {
      expanded.push(id)
      this.setState({ expanded })
    }
  }

  handleParentSelection = id => {
    const { selected } = this.state
    const skus = this.getProductSkus(id)
    const varientsSelected = []
    const skusIds = []
    skus.forEach(({ id: skuId }) => {
      skusIds.push(skuId)
      if (selected.includes(skuId)) {
        varientsSelected.push(skuId)
      }
    })

    this.setState({ selected: varientsSelected.length === 0 ? skusIds : [] })
  }

  handleChildSelection = id => {
    const { selected } = this.state
    if (selected.includes(id)) {
      this.setState({ selected: selected.filter(item => item !== id) })
    } else {
      selected.push(id)
      this.setState({ selected })
    }
  }

  renderCheckbox = (id, hasChildren) => {
    let checkboxIcon = CheckboxOutline
    if (hasChildren) {
      checkboxIcon = this.handleParentCheckbox(id)
    } else {
      checkboxIcon = this.state.selected.includes(id)
        ? CheckboxFilled
        : CheckboxOutline
    }

    return (
      <span
        className={styles.checkbox}
        style={{ backgroundImage: `url(${checkboxIcon})` }}
        alt="selection"
      />
    )
  }

  renderItem = ({
    id,
    images: [image],
    name,
    skus,
    productName,
    className,
    handleSelection,
  }) => {
    const { expanded } = this.state
    const hasChildren = skus && skus.length > 0
    const isExpanded = expanded.includes(id)

    return (
      <>
        <div key={id} className={cx(styles.node, className)}>
          {hasChildren && (
            <button
              className="btn-reset"
              onClick={() => this.handleToggleExpandView(id)}
            >
              <img
                src={arrowRight}
                alt="arrow"
                className={cx(styles.arrow, isExpanded && styles.expanded)}
              />
            </button>
          )}

          <button
            className={cx('btn-reset')}
            onClick={() => handleSelection(id)}
          >
            {this.renderCheckbox(id, hasChildren)}
          </button>
          <div
            className={styles.details}
            onClick={() => this.handleToggleExpandView(id)}
          >
            <img src={image.url} alt={name} className={styles.image} />
            <span>
              {productName && `${productName}: `}
              {name}
            </span>
          </div>
        </div>

        {hasChildren &&
          isExpanded &&
          skus.map(sku =>
            this.renderItem({
              ...sku,
              productName: name,
              className: styles.child,
              handleSelection: this.handleChildSelection,
            })
          )}
      </>
    )
  }

  render() {
    return (
      <section className={styles.container}>
        {this.props.products.map(product =>
          this.renderItem({
            ...product,
            handleSelection: this.handleParentSelection,
          })
        )}
      </section>
    )
  }
}