import { ChevronRightIcon } from '@heroicons/react/outline';
import React, { useState } from 'react';
import { ICategory } from '../../Interfaces/ICategory';
import { TruncateString } from '../../utils/stringtools';

interface ICategoryProps {
  children: JSX.Element | JSX.Element[]
  category: ICategory
}

export function Category(props: ICategoryProps): JSX.Element {
  const [isOpen, setIsOpen] = useState(false);

  const categoryType: string = props.category.Type;
  const categoryDisplayedText: string = props.category.DisplayedText ?? categoryType;

  return (
    <div
      className={` transition-all text-center ${isOpen ? 'overflow-hidden h-full' : 'overflow-visible h-16'}`}
      key={categoryType}
      id={categoryType}
      title={categoryDisplayedText}
    >
      <div
        className='flex flex-row group cursor-pointer h-16'
        onClick={() => setIsOpen(!isOpen)}
      >
        <span className={`transition-all flex-1 h-full justify-center sidebar-component-left ${isOpen ? 'rounded-b-none bg-slate-400/80 group-hover:bg-blue-600' : ''}`}>
          {TruncateString(categoryDisplayedText, 25)}
        </span>
        <span className={`flex-none h-full justify-center sidebar-component-right ${isOpen ? 'rounded-b-none' : ''}`}>
          <ChevronRightIcon className={`transition-all w-5 ${isOpen ? 'rotate-90' : ''}`} />
        </span>
      </div>
      <div className={`transition-all grid gap-2 p-2 rounded-b-lg ${isOpen ? 'visible overflow-auto bg-slate-400/80' : 'hidden overflow-hidden'}`}>
        { props.children }
      </div>
    </div>
  );
}