import { IAccordion, IAccordionItem } from './Accordion.interface'
import React, { useRef, useState } from 'react'
import {
  StyledAccordion,
  StyledAccordionContent,
  StyledAccordionItem,
  StyledAccordionTitle,
  StyledAccordionWrapper,
  WrapIcon
} from './Accordion.theme'

import Icon from '@/components/atoms/Icon/Icon.component'

export const Accordion = ({
  theme = 'dark',
  className,
  style,
  children

}: IAccordion) => {
  return (
    <StyledAccordion theme={theme} className={className} style={style}>
      {children}
    </StyledAccordion>
  )
}

export const AccordionItem = ({
  theme = 'dark',
  title,
  active: isActive,
  className,
  style,
  children,
  iconRight = true,
  justify = 'space-between',

}: IAccordionItem) => {
  const [active, setActive] = useState(isActive)
  const contentEl = useRef<HTMLInputElement>(null)

  return (
    <StyledAccordionItem
      theme={theme}
      active={active}
      title={title}
      className={className}
      style={style}
      iconRight={iconRight}
    >
      <StyledAccordionTitle
        theme={theme}
        justify={justify}
        className={`text-uppercase`}
        onClick={() => setActive(!active)}
      >
        {!iconRight && <WrapIcon>
          {active ? (
            <Icon className="icon-remove" />
          ) : (
            <Icon className="icon-add" />
          )}
        </WrapIcon>}
        <div>{title}</div>
        {iconRight && <WrapIcon>
          {active ? (
            <Icon className="icon-remove" />
          ) : (
            <Icon className="icon-add" />
          )}
        </WrapIcon>}
      </StyledAccordionTitle>
      <StyledAccordionContent
        theme={theme}
        active={active}
        title={title}
        ref={contentEl}
        className={className}
        style={
          active
            ? { height: contentEl?.current?.scrollHeight ?? '100%' }
            : { height: 0 }
        }
      >
        <StyledAccordionWrapper theme={theme}>
          {children}
        </StyledAccordionWrapper>
      </StyledAccordionContent>
    </StyledAccordionItem>
  )
}