import {
  SectionHeader,
  SectionHeaderProps,
  Text,
  CounterBadge,
  Box,
  Tooltip,
} from '@wix/design-system';
import React, {
  cloneElement,
  isValidElement,
  ReactElement,
  ReactNode,
} from 'react';
import { st, classes } from './CollectionSectionHeader.st.css.js';
import { CollectionSectionHeaderActionBar } from './CollectionSectionHeaderActionBar';
import { Section } from './CollectionSectionHeader.types';

export interface CollectionSectionHeaderProps<T = unknown>
  extends Pick<SectionHeaderProps, 'skin' | 'dataHook'> {
  sectionId: string;
  sectionIndex: number;
  section: Section & {
    count: number;
    hasMore?: boolean;
    items?: T[];
    collapsed?: boolean;
  };
  biComponentType: string;
  collapsible?: boolean;
  onToggleCollapse?: (sectionId: string) => void;
}

export const CollectionSectionHeader = <T,>({
  sectionId,
  sectionIndex,
  section,
  skin,
  dataHook,
  biComponentType,
  collapsible,
  onToggleCollapse,
}: CollectionSectionHeaderProps<T>) => {
  const renderBadge = (): ReactNode => {
    const { badge } = section;

    if (!badge || !badge.visible) {
      return null;
    }

    return (
      <CounterBadge
        truncate={false}
        skin={badge.skin || 'light'}
        dataHook="section-header-badge"
      >
        {section.count}
        {section.hasMore ? '+' : ''}
      </CounterBadge>
    );
  };

  const renderSummary = (): ReactNode => {
    const { summary } = section;

    if (!summary || summary.length === 0) {
      return null;
    }

    return (
      <Box gap="SP1">
        {summary.map((item, index) => (
          <Box
            key={index}
            verticalAlign="middle"
            gap="3px"
            dataHook="section-header-summary-item"
          >
            <Tooltip content={item.text}>
              {isValidElement(item.icon)
                ? cloneElement(item.icon as ReactElement, {
                    className: st(
                      classes.summaryIcon,
                      item.icon.props?.className,
                    ),
                  })
                : item.icon}
            </Tooltip>
            <Text size="tiny" weight="normal" skin="standard" secondary>
              {item.count}
            </Text>
          </Box>
        ))}
      </Box>
    );
  };

  const title = (
    <Box verticalAlign="middle" gap="SP2">
      <Box gap="SP1">
        <Text size="small" weight="normal">
          {section.title}
        </Text>
        {renderBadge()}
      </Box>
      {renderSummary()}
    </Box>
  );

  return (
    <SectionHeader
      dataHook={dataHook}
      title={title}
      skin={skin}
      divider={section.collapsed ? 'bottom' : 'none'}
      size="small"
      suffix={
        <CollectionSectionHeaderActionBar
          sectionId={sectionId}
          sectionIndex={sectionIndex}
          section={section}
          biComponentType={biComponentType}
          collapsible={collapsible}
          onToggleCollapse={onToggleCollapse}
        />
      }
    />
  );
};