import React, { useState, ReactElement } from 'react';
import { style as s } from 'app/styles';
import { CaretRightIcon } from './CaretRightIcon';
import { CaretDownIcon } from './CaretDownIcon';

interface ComponentProps {
  children: ReactElement[];
  isOpen: boolean;
  onOpenToggle: () => void;
  style?: object;
  title: string;
}

const panelStyle = {
  _extends: 'flexColumn',
  flexGrow: 0,
  flexShrink: 0,
  position: 'relative',
};

const openPanelStyle = {
  _extends: panelStyle,
  height: 'calc(100% - 185px)',
  marginBottom: '@margins.large+px',
  transition: `all .25s ease`,
};

const closedPanelStyle = {
  ...panelStyle,
  height: 30,
  transition: `all .5s ease`,
};

const toggleIconStyle = {
  cursor: 'pointer',
};

export const CollapsibleGroup: React.FC<ComponentProps> = ({
  children,
  style,
  title,
  isOpen,
  onOpenToggle,
}): React.ReactElement => {
  const panelStyle = isOpen ? openPanelStyle : closedPanelStyle;
  return (
    <div style={s(panelStyle, style)} onClick={onOpenToggle}>
      <div style={s('flexRow')}>
        <div style={s(toggleIconStyle)}>
          {isOpen ? <CaretDownIcon /> : <CaretRightIcon />}
        </div>
        <div style={s('h2Text')}>{title}</div>
      </div>
      {isOpen && children}
    </div>
  );
};