import React, { ReactNode, useEffect, useState } from 'react';
import './Accordion.scss';
import { getIconByName } from '../Icon/iconList';
import Icon from '../Icon';
import Tooltip from '../Tooltip';
import '../../../index.scss';
import { colors } from '../../colors/colorConstants';
export interface AccordionProps {
  /**
   * Accordion Header Title
   */
  headerTitle: string;
  /**
   * Content that to be shown while Accordion is expanded
   */
  accordionContent: ReactNode;
  /**
   * Accordion Type
   */
  variant: 'primary' | 'secondary' | 'minimal';
  /**
   * Property to disable accordion
   */
  disable?: boolean;
  /**
   * Info message to user for disabling accordion
   */
  disableInfoMessage?: string;
  /*
   * Property is for default state of accordian
   */
  defaultState?: boolean;
}

/**
 * Accordion UI component
 */
const Accordion = ({
  headerTitle = '',
  variant = 'secondary',
  accordionContent = <>This is accordian content</>,
  disable = false,
  disableInfoMessage = '',
  defaultState = true,
}: AccordionProps) => {
  const [expandAccordion, setExpandAccordion] = useState(true);
  const getPopupIcon = (name: string) => {
    let icon = getIconByName(name);
    return icon;
  };
  const onAccordionClick = () => {
    setExpandAccordion(!expandAccordion);
  };
  useEffect(() => {
    setExpandAccordion(defaultState);
  }, [defaultState]);
  const toggleIconColor =
    variant === 'minimal' ? colors.ff_up_arrow_color : colors.grey_dark;
  return (
    <div className="storybook-accordion">
      <div
        className={`${expandAccordion ? 'accordion-expanded' : `accordion-collapsed--${variant}`} `}
      >
        <Tooltip title={disableInfoMessage}>
          <div
            className={`accordion-header accordion-header--${variant} ${disable && 'ff-disabled'}`}
          >
            <div className="header-title">
              <span
                className={`header-title--${variant}`}
                onClick={() => {
                  variant === 'minimal' && !disable && onAccordionClick();
                }}
              >
                {headerTitle}
              </span>
            </div>
            <div
              className={`accordion-arrow--${variant}`}
              onClick={() => {
                !disable && onAccordionClick();
              }}
            >
              <Icon
                name={
                  !disable && expandAccordion ? 'arrow_down' : 'arrow_right'
                }
                color={toggleIconColor}
                hoverEffect={false}
              />
            </div>
          </div>
        </Tooltip>
      </div>
      {!disable && expandAccordion && <div>{accordionContent}</div>}
    </div>
  );
};

export default Accordion;