import React, { useEffect, useMemo, useState } from "react";
import { TemplateCard } from "./TemplateCard";
import {
  Illustration,
  Input,
  Paginate,
  Pagination,
  TalentButton,
  TalentButtonWithIcon,
  Typography,
} from "@komi-app/components";

import {
  CampaignTemplate,
  SelectOption,
  TemplateMenuOptions,
} from "types/templates";

import classnames from "classnames";
import "./TemplateGalleryPage.scss";

export interface TemplatePWithCursorageProps
  extends React.HTMLProps<HTMLDivElement> {
  allowTemplateImport?: boolean;
  templates: CampaignTemplate[];
  selectMode: boolean;
  pageIndex: number;
  pageCount: number;
  isLoading?: boolean;
  onTemplateSelected?: (template: CampaignTemplate) => void;
  onTemplateImportClick: () => void;
  onTemplateNewClick: () => void;
  onTemplateMenuOptionClick: (
    option: SelectOption<TemplateMenuOptions>,
    template: CampaignTemplate,
  ) => void;
  onSearchTermChange: (searchTerm: string) => unknown;
  onPageIndexChange: (pageIndex: number) => unknown;
}
const TemplateWithCursorGalleryPage: React.FC<TemplatePWithCursorageProps> = ({
  allowTemplateImport: allowImport = true,
  selectMode,
  templates,
  pageIndex,
  pageCount,
  isLoading,
  onTemplateImportClick,
  onTemplateNewClick,
  onTemplateMenuOptionClick,
  onTemplateSelected,
  onSearchTermChange,
  onPageIndexChange,
  ...props
}) => {
  const classNames = classnames("template__page", props.className);

  return (
    <div {...props} className={classNames}>
      <div className="template-page__header">
        <Input
          groupClassName="template-page__header-search-wrapper"
          className="template-page__header-search"
          placeholder="Search templates"
          prefixIcon="search"
          onValueChange={onSearchTermChange}
        />

        <div className="template-page__header-controls">
          {allowImport && (
            <TalentButton
              onClick={onTemplateImportClick}
              variant="secondary"
              data-testid="import-template-button"
            >
              Import template
            </TalentButton>
          )}
          {!selectMode && (
            <TalentButton
              onClick={() => onTemplateNewClick()}
              variant="primary"
            >
              NEW TEMPLATE
            </TalentButton>
          )}
        </div>
      </div>
      {templates.length > 0 ? (
        <div>
          <div className="template-page__cards">
            {templates.map((template, index) => (
              <div className="template-page__card" key={index}>
                <TemplateCard
                  selectMode={selectMode}
                  onTemplateSelected={onTemplateSelected}
                  cardIndex={index}
                  template={template}
                  onMenuOptionClick={(option) =>
                    onTemplateMenuOptionClick(option, template)
                  }
                />
              </div>
            ))}
          </div>

          <Paginate
            initialPage={pageIndex}
            pageCount={pageCount}
            onPageChange={({ selected: pageIndex }) =>
              onPageIndexChange(pageIndex)
            }
            pageRangeDisplayed={5}
            marginPagesDisplayed={1}
          />
        </div>
      ) : isLoading ? null : (
        <div className="template-page__table-placeholder">
          <Illustration
            className="placeholder-illustration"
            name="empty-state"
            width={164}
          />
          <Typography.Heading className="placeholder-heading" level={4}>
            Nothing Here Yet
          </Typography.Heading>
          <Typography.Body className="placeholder-tagline" color="gray-700">
            Click the button below to get started
          </Typography.Body>

          <TalentButtonWithIcon
            label="Create New Template"
            onClick={() => onTemplateNewClick()}
            type="text"
            prefixIcon="addFilled"
          />
        </div>
      )}
    </div>
  );
};

export default TemplateWithCursorGalleryPage;
