/* @flow */

import classnames from "classnames"
import { get } from "lodash"
import { Flex, FlexItem } from "../"
import React, { useState } from "react"
import AnimateHeight from "react-animate-height"
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
import { globalProps } from "../utilities/globalProps.js"

type CollapsibleProps = {
  children: React.ChildrenArray<React.Element<typeof Main | Content>>,
  aria?: object,
  className?: string,
  data?: object,
  id?: string,
}

type CollapsibleMainProps = {
  children: array<React.ReactNode> | React.ReactNode,
  className?: string,
  padding?: string,
}

type CollapsibleContentProps = {
  children: array<React.ReactNode> | React.ReactNode | string,
  className?: string,
  padding?: string,
}

const Main = (props: CollapsibleMainProps) => {
  const { children, className, padding = "sm" } = props
  const mainCSS = buildCss("pb_collapsible_main_kit")
  const mainSpacing = globalProps(props, { padding })

  return (
    <div className={classnames(mainCSS, className, mainSpacing)}>
      {children}
    </div>
  )
}

const Content = (props: CollapsibleContentProps) => {
  const { children, className, padding = "md" } = props
  const contentCSS = buildCss("pb_collapsible_content_kit")
  const contentSpacing = globalProps(props, { padding })

  return (
    <div className={classnames(contentCSS, className, contentSpacing)}>
      {children}
    </div>
  )
}

const Collapsible = (props: CollapsibleProps) => {
  const { aria = {}, className, children = [], data = {}, id } = props

  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const classes = classnames(
    buildCss("pb_collapsible"),
    className,
    globalProps(props)
  )

  const [height, setHeight] = useState(0)
  const toggleExpand = () => {
    setHeight(height === 0 ? "auto" : 0)
  }

  const collapsibleChildren =
    typeof children === "object" && children.length ? children : [children]

  console.log("CollapsibleChildren:", collapsibleChildren)

  const subComponentTags = (tagName) => {
    console.log("TagName:", tagName)
    return collapsibleChildren
      .filter((c) => get(c, "type.name") === tagName)
      .map((child, i) => {
        console.log("the child:", child)
        return React.cloneElement(child, {
          key: `${tagName.toLowerCase()}-${i}`,
        })
      })
  }

  const renderChevron = (height) => {
    const direction = height === 0 ? "down" : "up"

    return (
      <div key={direction} style={{ verticalAlign: "middle" }}>
        <i className={`far fa-chevron-${direction} fa-fw`} />
      </div>
    )
  }

  const renderMain = () => {
    const mainTags = subComponentTags("Main")

    return (
      <div onClick={toggleExpand}>
        <Flex spacing='between' vertical='center'>
          <FlexItem>{mainTags}</FlexItem>
          <FlexItem>{renderChevron(height)}</FlexItem>
        </Flex>
      </div>
    )
  }

  const renderContent = () => {
    const nonMainChildren = collapsibleChildren.filter(
      (child) => get(child, "type.name") !== "Main"
    )
    console.log("NonMainChildren:", nonMainChildren)
    return (
      <AnimateHeight duration={500} height={height} id='bottom-section'>
        {nonMainChildren}
      </AnimateHeight>
    )
  }

  return (
    <div {...ariaProps} {...dataProps} className={classes} id={id}>
      {renderMain()}
      {renderContent()}
    </div>
  )
}

Collapsible.Main = Main
Collapsible.Content = Content

export default Collapsible