import { useState, useRef, useCallback } from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
// https://www.youtube.com/watch?v=4F8EYGao9pc
// useRef 顧名思義就是使用「參考」該值與元件生命週期脫鉤不受渲染影響、創造的可變值(Mutable Value)也不會觸發渲染


const collapseItems = [
  {
    label: "Happy day",
    children: <>
      <strong>I'm the children text.</strong>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A ducimus consectetur obcaecati sunt quaerat quam odio pariatur hic molestiae repellat?</p>
    </>
  },
  {
    label: "Show content!",
    children: null
  }, // If content is null, Collapse component will render without children
  {
    label: "🥰",
    children: null
  }
];

function Collapse (props) {
  const { index, isOpen, setIsOpenList, handleIsOpenGroup, handleParentClick, children } = props;
  // toggle single
  // const [isOpen, setIsOpen] = useState(false);
  // const handleClick = useCallback(() => {
  //   setIsOpen(!isOpen);
  //   props.handleIsOpenGroup(props.index, !isOpen);
  // }, [isOpen]);
  
  // toggle group
  const handleClick = useCallback((e) => {
    e.stopPropagation()
    setIsOpenList(Array(collapseItems.length).fill(false));
    handleIsOpenGroup(props.index, !props.isOpen);
  }, [isOpen]);
  const parentRef = useRef(null);
  
  return <article class="py-2">
    <button className="rounded-lg bg-amber-200 px-2 py-1 my-2 font-semibold relative z-10" onClick={handleClick}>
      {props.label} <i className={ isOpen ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down' }></i>
    </button>
   
    <div className="content-wrapper -translate-y-6" style={{
        height: isOpen ? parentRef.current.scrollHeight + 'px' : '0px'
      }} ref={parentRef}>
      <div className="content border-2 border-grey-600 w-[calc(100%-12px)] sm:w-2/3 px-3 py-4 ml-2 relative">
        {children || 'Default text...'} 
      </div>
    </div>
  </article>;
}

function App() {
  const [isOpenList, setIsOpenList] = useState(Array(3).fill(false));
  const handleIsOpenGroup = (index, isOpen) => {
    setIsOpenList(prev => {
      const list = [...prev];
      list[index] = isOpen;
      return list;
    })
  }
  const handleParentClick = (event) => {
    setIsOpenList(Array(collapseItems.length).fill(false));
  }
  return <>
    <div class="wrapper" onClick={handleParentClick}>
      {collapseItems.map((collapse, index) => <Collapse
                                                label={collapse.label}
                                                isOpenList={isOpenList}
                                                isOpen={isOpenList[index]}
                                                setIsOpenList={setIsOpenList}
                                                handleIsOpenGroup={handleIsOpenGroup}
                                                index={index}>
        {collapse.children || 'default text...'}
      </Collapse>
                        )}
    </div>
  </>;
}

ReactDOM.render(<App />, document.querySelector("#app"));