import {
  AccordionContentEditor,
  AccordionEditor,
  AccordionItemEditor,
  ButtonEditorV2,
  ButtonSubmitV3Editor,
  CountdownEditor,
  DEFAULT_PRODUCT_LIST,
  DEFAULT_PRODUCT_LIST_HEADING,
  DEFAULT_TABS,
  DividerEditor,
  FormV4Editor,
  GalleryEditor,
  getColWidthProps,
  HeadingEditor,
  HtmlCodeEditor,
  IconEditor,
  ImageEditor,
  ListItemContentEditorV2,
  ListItemEditorV2,
  ListItemIconEditorV2,
  LuckyDrawV2Editor,
  MapEditor,
  NumberCounterEditor,
  ParagraphEditor,
  ProductListContentEditor,
  ProductListEditor,
  SliderEditor,
  SocialIconEditor,
  SpacerEditor,
  StoreListEditor,
  SubscriptionFormV2,
  TabEditor,
  TabItemEditor,
  TableEditor,
  TempiProductListEditorV2,
  QRCodeEditor,
  ColEditor,
  RowEditor,
  ExamScoreEditor,
  VideoEditor,
  ArticleListEditor,
  LeadFormEditor,
  TEMPI_DEFAULT_PRODUCT_LIST,
  TreasureHuntingEditor,
  LuckyMoneyEditor,
  PotSmashingEditor,
  SampleComponentEditor,
  PageFlipEditor,
  DEFAULT_PAGE_FLIP,
} from '@tempi/core-elements';
import {
  CodeRegular,
  CursorHoverRegular,
  ImageRegular,
  ImageMultipleRegular,
  SplitHorizontalRegular,
  CartRegular,
  TextTRegular,
  TableRegular,
  FormRegular,
  StarRegular,
  ClockRegular,
  QrCodeRegular,
  CellularData1Regular,
  BuildingShopRegular,
  AutoFitHeightRegular,
  MapRegular,
  ScaleFitRegular,
  CenterVerticalRegular,
  TabDesktopRegular,
  AppsListRegular,
  ChannelShareRegular,
  SearchInfoRegular,
  VideoRegular,
  DocumentOnePageRegular,
  BookOpenRegular,
} from '@fluentui/react-icons';
import { AntdCustomIcon as Icon } from '@tempi/icons-dev';
import { Element } from '@tempi/core-editor';
import {
  ElementCategory,
  ElementProps,
  MENU_ITEMS,
  t,
} from '@tempi/editor-site';
import { ELEMENT_CATEGORIES } from './categories';

export const ELEMENTS: ElementProps[] = [
  {
    category: [ElementCategory.MINI_GAME],
    icon: <Icon name="ChestBasicColored" style={{ fontSize: 28 }} />,
    selector: <Element is={TreasureHuntingEditor} />,
    key: MENU_ITEMS.TREASURE_HUNTING,
    name: t('mini_game.treasureHunting'),
    trackingContentName: 'dragTreasureHunting',
  },
  {
    category: [ElementCategory.MINI_GAME],
    icon: <Icon name="EnvelopColored" style={{ fontSize: 28 }} />,
    selector: <Element is={LuckyMoneyEditor} />,
    key: MENU_ITEMS.LUCKY_MONEY,
    name: t('mini_game.lucky_money'),
    trackingContentName: 'dragLuckyMoney',
  },
  {
    category: [ElementCategory.MINI_GAME],
    icon: <Icon name="PotColored" style={{ fontSize: 28 }} />,
    selector: <Element is={PotSmashingEditor} />,
    key: MENU_ITEMS.POT_SMASHING,
    name: t('mini_game.potSmashing'),
    trackingContentName: 'dragPotSmashing',
  },
  {
    name: 'QR Code',
    icon: <QrCodeRegular fontSize={20} />,
    selector: <QRCodeEditor />,
    key: MENU_ITEMS.QR_CODE,
    trackingContentName: 'dragQRCode',
    category: [ELEMENT_CATEGORIES.CONTENT],
  },
  {
    name: t('Danh sách sản phẩm'),
    icon: <CartRegular fontSize={20} />,
    selector: <TempiProductListEditorV2 {...TEMPI_DEFAULT_PRODUCT_LIST} />,
    key: MENU_ITEMS.TEMPI_PRODUCT_LIST,
    category: [ELEMENT_CATEGORIES.COLLECT_LEAD, ELEMENT_CATEGORIES.PRODUCT],
    trackingContentName: 'dragProductList',
  },
  {
    name: t('Bố cục 2 cột'),
    icon: (
      <Icon
        name="TwoColumnsDevFilled"
        style={{ fontSize: 30, color: '#888' }}
      />
    ),
    selector: (
      <Element canvas is={RowEditor}>
        <Element canvas is={ColEditor} {...getColWidthProps(6)} />
        <Element canvas is={ColEditor} {...getColWidthProps(6)} />
      </Element>
    ),
    key: MENU_ITEMS.LAYOUT,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragLayout',
  },
  {
    name: t('Đoạn văn'),
    icon: <TextTRegular fontSize={20} />,
    selector: <ParagraphEditor />,
    key: MENU_ITEMS.PARAGRAPH,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragParagraph',
  },
  {
    name: t('Bảng'),
    icon: <TableRegular fontSize={20} />,
    selector: <TableEditor />,
    key: MENU_ITEMS.TABLE,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragTable',
  },
  {
    name: t('common.image'),
    icon: <ImageRegular fontSize={20} />,
    selector: <ImageEditor />,
    key: MENU_ITEMS.IMAGE,
    category: [ELEMENT_CATEGORIES.MEDIA],
    trackingContentName: 'dragImage',
  },
  {
    name: 'Form',
    icon: <FormRegular fontSize={20} />,
    selector: (
      <Element canvas is={FormV4Editor}>
        <ButtonSubmitV3Editor />
      </Element>
    ),
    key: MENU_ITEMS.FORM,
    category: [ELEMENT_CATEGORIES.COLLECT_LEAD],
    trackingContentName: 'dragForm',
  },
  {
    name: t('Form đăng ký'),
    icon: <FormRegular fontSize={20} />,
    selector: (
      <Element canvas is={SubscriptionFormV2}>
        <ButtonSubmitV3Editor />
      </Element>
    ),
    key: MENU_ITEMS.SUBSCRIPTION_FORM,
    category: [ELEMENT_CATEGORIES.COLLECT_LEAD],
    trackingContentName: 'dragSubscriptionForm',
    isHide: true,
  },
  {
    name: t('Nút bấm'),
    icon: <CursorHoverRegular fontSize={20} />,
    selector: <ButtonEditorV2 />,
    key: MENU_ITEMS.BUTTON,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragButton',
  },
  {
    name: t('Thư viện ảnh'),
    icon: <ImageMultipleRegular fontSize={20} />,
    key: MENU_ITEMS.GALLERY,
    selector: <GalleryEditor />,
    category: [ELEMENT_CATEGORIES.MEDIA],
    trackingContentName: 'dragGallery',
  },
  {
    name: 'Video',
    icon: <VideoRegular style={{ fontSize: 24 }} />,
    selector: <VideoEditor />,
    key: MENU_ITEMS.VIDEO,
    category: [ELEMENT_CATEGORIES.MEDIA],
    trackingContentName: 'dragVideo',
  },
  {
    name: 'Slideshow',
    icon: <ScaleFitRegular fontSize={20} />,
    selector: <SliderEditor />,
    key: MENU_ITEMS.SLIDESHOW,
    category: [ELEMENT_CATEGORIES.MEDIA],
    trackingContentName: 'dragSlideshow',
  },
  {
    name: t('Khoảng cách'),
    icon: <AutoFitHeightRegular fontSize={20} />,
    selector: <SpacerEditor />,
    key: MENU_ITEMS.SPACER,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragSpacer',
  },
  {
    name: t('Đường phân chia'),
    icon: <SplitHorizontalRegular fontSize={20} />,
    selector: <DividerEditor />,
    key: MENU_ITEMS.DIVIDER,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragDivider',
  },
  {
    name: 'Icon',
    icon: <StarRegular fontSize={20} />,
    selector: <IconEditor />,
    key: MENU_ITEMS.ICON,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragIcon',
  },
  {
    name: 'Tab',
    icon: <TabDesktopRegular fontSize={20} />,
    selector: (
      <Element canvas is={TabEditor}>
        <Element canvas {...DEFAULT_TABS[0]} is={TabItemEditor} />
        <Element canvas {...DEFAULT_TABS[1]} is={TabItemEditor} />
      </Element>
    ),
    key: MENU_ITEMS.TAB,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragTab',
  },
  {
    name: t('Mã HTML'),
    icon: <CodeRegular style={{ fontSize: 20 }} />,
    selector: <HtmlCodeEditor />,
    key: MENU_ITEMS.HTML_CODE,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragHtmlCode',
  },
  {
    name: t('Đếm ngược'),
    icon: <ClockRegular fontSize={20} />,
    selector: <CountdownEditor />,
    key: MENU_ITEMS.COUNTDOWN,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragCountdown',
  },
  {
    name: t('Danh sách Icon'),
    icon: <AppsListRegular fontSize={20} />,
    selector: (
      <Element canvas is={ListItemEditorV2}>
        <ListItemIconEditorV2 />
        <ListItemContentEditorV2 />
      </Element>
    ),
    key: MENU_ITEMS.LIST,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragList',
  },
  {
    name: t('Nội dung thu gọn'),
    icon: <CenterVerticalRegular fontSize={24} />,
    selector: (
      <Element canvas is={AccordionEditor}>
        <AccordionItemEditor>
          <Element is={AccordionContentEditor} canvas />
        </AccordionItemEditor>
        <AccordionItemEditor>
          <Element is={AccordionContentEditor} canvas />
        </AccordionItemEditor>
      </Element>
    ),
    key: MENU_ITEMS.ACCORDION,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragAccordion',
  },
  {
    name: t('Vòng quay may mắn'),
    icon: <Icon name="LuckyDrawColored" style={{ fontSize: 28 }} />,
    selector: <LuckyDrawV2Editor />,
    key: MENU_ITEMS.LUCKY_DRAW_V2,
    category: [ELEMENT_CATEGORIES.COLLECT_LEAD],
    trackingContentName: 'dragLuckyDrawV2',
  },
  {
    name: t('Nội dung thu gọn'),
    icon: <CenterVerticalRegular fontSize={20} />,
    selector: (
      <Element canvas is={AccordionEditor}>
        <AccordionItemEditor>
          <Element is={AccordionContentEditor} canvas />
        </AccordionItemEditor>
        <AccordionItemEditor>
          <Element is={AccordionContentEditor} canvas />
        </AccordionItemEditor>
      </Element>
    ),
    key: MENU_ITEMS.ACCORDION,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragAccordion',
    isHide: true,
  },
  {
    name: t('Bản đồ'),
    icon: <MapRegular fontSize={20} />,
    key: MENU_ITEMS.MAP,
    selector: <MapEditor />,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragMap',
  },
  {
    name: t('Icon mạng xã hội'),
    icon: <ChannelShareRegular fontSize={20} />,
    selector: <SocialIconEditor />,
    key: MENU_ITEMS.SOCIAL_ICON,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragSocialIcon',
  },
  {
    name: t('Danh sách cửa hàng'),
    icon: <BuildingShopRegular fontSize={20} />,
    selector: <StoreListEditor />,
    key: MENU_ITEMS.STORE_LIST,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragStoreList',
  },
  {
    name: 'Progress',
    icon: <CellularData1Regular fontSize={20} />,
    selector: <NumberCounterEditor />,
    key: MENU_ITEMS.NUMBER_COUNTER,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragNumberCounter',
  },
  {
    name: t('Sản phẩm Teko'),
    icon: <CartRegular fontSize={20} />,
    selector: (
      <Element canvas is={ProductListEditor}>
        <Element canvas is={HeadingEditor} {...DEFAULT_PRODUCT_LIST_HEADING} />
        <Element
          canvas
          is={ProductListContentEditor}
          {...DEFAULT_PRODUCT_LIST}
        />
      </Element>
    ),
    key: MENU_ITEMS.PRODUCT_LIST,
    category: [ELEMENT_CATEGORIES.TEKO],
    trackingContentName: 'dragProductList',
  },
  {
    category: [ELEMENT_CATEGORIES.TEKO],
    icon: <SearchInfoRegular fontSize={20} />,
    selector: <ExamScoreEditor />,
    key: 'EXAM_SCORE',
    name: t('Điểm thi đại học'),
    trackingContentName: 'dragExamScore',
  },
  {
    category: [ELEMENT_CATEGORIES.COLLECT_LEAD],
    icon: <FormRegular fontSize={20} />,
    selector: (
      <Element canvas is={LeadFormEditor}>
        <ButtonSubmitV3Editor />
      </Element>
    ),
    key: MENU_ITEMS.LEAD_FORM,
    name: 'Lead Form (Teko CDP)',
    trackingContentName: 'dragLeadForm',
  },
  {
    name: t('Danh sách bài viết'),
    icon: <DocumentOnePageRegular fontSize={20} />,
    selector: <ArticleListEditor />,
    key: MENU_ITEMS.ARTICLE_LIST,
    category: [ELEMENT_CATEGORIES.CONTENT],
    trackingContentName: 'dragArticleList',
  },
  {
    name: t('book_page_flip'),
    icon: <BookOpenRegular fontSize={20} />,
    selector: <PageFlipEditor {...DEFAULT_PAGE_FLIP} />,
    key: MENU_ITEMS.PAGE_FLIP,
    category: [ElementCategory.BETA],
    trackingContentName: 'dragPageFlip',
    badge: {
      text: t('beta'),
      color: 'volcano',
    },
  },
];
export const allElementsExclude = (
  excludeList: string[] = [],
): ElementProps[] => {
  if (!excludeList.length) return ELEMENTS;

  return ELEMENTS.filter((component) => !excludeList.includes(component.key));
};
export const groupElementsByCat = (
  elements: ElementProps[] = ELEMENTS,
  categories: Record<string, string> = ElementCategory,
) => {
  return Object.keys(categories).map((key) => {
    const catName = categories[key] as string;
    const items = elements.filter((item) => item.category.includes(catName));
    if (key === 'ALL')
      return {
        key: key,
        name: catName,
        items: elements,
      };
    return {
      key: key,
      name: catName,
      items,
    };
  });
};

export const getElements = (
  elements = [],
  configs?: {
    elements: ElementProps[];
    merchantId?: number;
    ignoreElementKeys?: string[];
    extendElements?: ElementProps[];
  },
): ElementProps[] => {
  const { merchantId, ignoreElementKeys, extendElements } = configs || {};
  const { merchantIdsDisplayCustomComponent = [], newComponents = {} } =
    window?.config || {};
  const now = new Date();
  const isMerchantPermitted =
    merchantIdsDisplayCustomComponent.length === 0 ||
    merchantIdsDisplayCustomComponent.includes(merchantId);
  const setIgnoreElementKeys = new Set(ignoreElementKeys);
  let newElements = [];

  elements.forEach((element, index) => {
    if (!setIgnoreElementKeys.has(element.key)) {
      if (
        newComponents?.[element.key]?.endTime &&
        newComponents[element.key].endTime >= now.getTime()
      ) {
        newElements[index] = {
          ...element,
          badge: {
            text: t('Mới'),
          },
        };
      } else {
        newElements[index] = { ...element };
      }
    }
  });

  if (isMerchantPermitted) {
    newElements.push({
      category: [ElementCategory.CUSTOM],
      icon: <TextTRegular fontSize={20} />,
      selector: <SampleComponentEditor />,
      key: MENU_ITEMS.SAMPLE_COMPONENT,
      name: 'Tempi sample',
      trackingContentName: 'sampleComponent',
    });
  }

  if (extendElements) {
    newElements = newElements.concat(extendElements);
  }

  return newElements;
};