import React from 'react';
import classnames from 'classnames';

import {
  Accordion as CoreAccordion,
  type AccordionItemProps as CoreAccordionItemProps,
  type AccordionProps as CoreAccordionProps,
} from '@shoptet/ui-core-web';
import type { Exact } from '@shoptet/utils';

import type { OmitPrivate } from '../../types';
import { Icon } from '../Icon/Icon';

// ─── Accordion ──────────────────────────────────────────────────────────────

export interface InheritedCoreAccordionProps extends OmitPrivate<Omit<CoreAccordionProps, 'children'>> {}

export interface AccordionOwnProps {
  children: React.ReactNode;
  /**
   * Add background to the accordion.
   * @default false
   */
  withBackground?: boolean;
  /**
   * Add a divider between accordion items.
   * @default 'off'
   */
  divider?: 'off' | 'top' | 'bottom' | 'topBottom';
  /**
   * Renders the accordion with compact spacing and a smaller title.
   * @default false
   */
  dense?: boolean;
}

export interface AccordionProps extends AccordionOwnProps, InheritedCoreAccordionProps {}

// ─── AccordionItem ───────────────────────────────────────────────────────────

export interface InheritedCoreAccordionItemProps extends OmitPrivate<
  Omit<CoreAccordionItemProps, 'unwrapped' | 'children' | 'className' | 'title'>
> {}

export interface AccordionItemOwnProps {
  /**
   * Title of the accordion item.
   */
  title: string;
  /**
   * Content of the accordion item.
   */
  children: React.ReactNode;
}

export interface AccordionItemProps extends AccordionItemOwnProps, InheritedCoreAccordionItemProps {}

function AccordionItem({ title, children, ...restProps }: AccordionItemProps) {
  restProps satisfies Exact<InheritedCoreAccordionItemProps, typeof restProps>;

  return (
    <CoreAccordion.Item
      className={state =>
        classnames('accordion__item', {
          'accordion__item--open': state.expanded,
        })
      }
      {...restProps}
    >
      <CoreAccordion.Item.Trigger className='accordion__trigger'>
        <span className='accordion__trigger__inner'>
          <span className='accordion__title'>{title}</span>
          <Icon icon='shp-arrow-down-2' />
        </span>
      </CoreAccordion.Item.Trigger>
      <CoreAccordion.Item.Content
        className={state => classnames('accordion__content', { 'accordion__content--open': state.expanded })}
      >
        {children}
      </CoreAccordion.Item.Content>
    </CoreAccordion.Item>
  );
}

// ─── Accordion compound component ───────────────────────────────────────────

export const Accordion = Object.assign(
  function Accordion({ withBackground, divider = 'off', dense = false, children, ...restProps }: AccordionProps) {
    restProps satisfies Exact<InheritedCoreAccordionProps, typeof restProps>;

    return (
      <CoreAccordion
        className={classnames('accordion', {
          'accordion--dense': dense,
          'accordion--withBackground': withBackground,
          'accordion--dividerTop': divider === 'top',
          'accordion--dividerBottom': divider === 'bottom',
          'accordion--dividerTopBottom': divider === 'topBottom',
        })}
        {...restProps}
      >
        {children}
      </CoreAccordion>
    );
  },
  {
    Item: Object.assign(AccordionItem, {
      displayName: 'Accordion.Item',
    }),
  }
);