import React, { useState } from "react";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
import styles from "./BusinessSegmentSwitcher.module.css";
import {
  ContentSwitcher,
  ContentSwitcherList,
  ContentSwitcherTab,
  ContentSwitcherContent,
} from "@arc-ui/components/ContentSwitcher";

import {
  ContentSwitcherDropdown,
  ContentSwitcherDropdownContent,
} from "@arc-ui/components/ContentSwitcherDropdown";

import { InformationCard } from "@arc-ui/components/InformationCard";
import { TypographyCard } from "@arc-ui/components/TypographyCard";

import { renderCard } from "./helpers/renderCard";
import { renderBusinessSegmentSwitcherCarousel } from "./helpers/renderBusinessSegmentSwitcherCarousel";
import { type BentoGridContent } from "./types/types";

/**
 * BusinessSegmentSwitcher displays tabbed content with a bento grid layout made up of 3 - 4 cards.
 * Renders as tabs on desktop and a dropdown with carousel on mobile (below 1024px).
 */
export const BusinessSegmentSwitcher = ({
  tabs,
  defaultValue,
  ...props
}: BusinessSegmentSwitcherProps) => {
  const initialTab = defaultValue ?? tabs[0]?.value ?? "";
  const [selectedTab, setSelectedTab] = useState<string>(initialTab);

  return (
    <div className={styles.businessSegmentSwitcher} {...filterAttrs(props)}>
      <div className={styles.businessSegmentSwitcherDesktop}>
        <ContentSwitcher
          value={selectedTab}
          onValueChange={(value: string) => setSelectedTab(value)}
        >
          <ContentSwitcherList isInset>
            {tabs.map(({ label, value }, index) => (
              <ContentSwitcherTab
                label={label}
                value={value}
                key={`${index}-${value}`}
              />
            ))}
          </ContentSwitcherList>
          {tabs.map(({ value, content, label }, index) => (
            <ContentSwitcherContent
              value={value}
              key={`${index}-${value}`}
              hidden={value !== selectedTab}
            >
              <div className={styles.contentWrapper}>
                <div className={styles.desktopCarousel}>
                  {renderBusinessSegmentSwitcherCarousel({ content, label })}
                </div>

                {renderCard(content.card1)}
                {renderCard(content.card2)}

                <div className={styles.cardCol}>
                  {content.card3 && <InformationCard {...content.card3} />}
                  <div>
                    <TypographyCard
                      heading={
                        content.card4.heading ||
                        `All ${label.toLowerCase()} solutions`
                      }
                      text={content.card4.text}
                      label={content.card4.label}
                      url={content.card4.url}
                      onClick={content.card4.onClick}
                    />
                  </div>
                </div>
              </div>
            </ContentSwitcherContent>
          ))}
        </ContentSwitcher>
      </div>

      <div className={styles.businessSegmentSwitcherMobile}>
        <ContentSwitcherDropdown
          isInset
          value={selectedTab}
          tabs={tabs}
          isFluid
          onValueChange={(value: string) => setSelectedTab(value)}
        >
          {tabs.map(({ value, content, label }, index) => (
            <ContentSwitcherDropdownContent
              value={value}
              key={`${index}-${value}`}
            >
              <div className={styles.contentWrapper}>
                {renderBusinessSegmentSwitcherCarousel({ content, label })}
              </div>
            </ContentSwitcherDropdownContent>
          ))}
        </ContentSwitcherDropdown>
      </div>
    </div>
  );
};

export interface BusinessSegmentSwitcherProps {
  /**
   * Default to an initial value of a tab. If this is left blank it will default to first tab.
   */
  defaultValue?: string;
  /**
   * Array of tabs to render. Each tab requires a unique `value`, a `label` for display, and `content` containing card configurations for the bento grid layout.
   */
  tabs: {
    value: string;
    label: string;
    content: BentoGridContent;
  }[];
}