import React, { useState } from 'react';

// Polotno and third party imports
import { SidePanelWrap } from 'polotno';
import type { StoreType } from 'polotno/model/store';
import {
  SidePanel as PolotnoSidePanel,
  DEFAULT_SECTIONS,
} from 'polotno/side-panel';

// Custom Sections / Components
import CustomTemplateSection from './Templates/customTemplateSection';
import CustomFieldSection from './CustomFields/customFieldSection';
import { CustomUploadsV2Section } from './CustomUploads';
import customAddOns from './CustomAddOns';
import CustomQRCode from './CustomQRCode';
import BlockColors from './CustomBlockColors';

interface Props {
  store: StoreType;
  currentTemplateType: string;
  currentProductId?: number;
  platformName?: string | null;
  templateGalleryModal?: boolean;
  selectedSection?: string;
  allowSenderFields?: boolean;
  excludedFields?: string[] | null;
  designerQueryAmount?: string | number;
  allowPropertyFields?: boolean;
  allowedAddOns?: any;
  allowedTemplateSections?: any;
  propertyOfferCost?: number;
  customPropertyOfferCost?: number;
  gsvCost?: number;
  currentTheme?: string | null | undefined;
  onGetOneTemplate?: (payload: any) => Promise<any>;
  onCreateCustomTemplateQuery?: (payload: any) => Promise<any>;
  onGetTemplates?: (payload: any) => Promise<any>;
  onGetCustomFields?: () => Promise<any>;
  onGetBrandingImages?: (payload: any) => Promise<any>;
  onDeleteBrandingImage?: (id: string | number) => Promise<void>;
  onUploadBrandingImage?: (payload: any) => Promise<any>;
  onGetQRCodes?: (payload: any) => Promise<any>;
  onDeleteQRCodes?: (id: string | number) => Promise<void>;
  onUploadQRCode?: (payload: any) => Promise<any>;
  onEditQRCode?: (payload: any) => Promise<any>;
  selectedTemplateType?: string | null;
}

const SidePanel: React.FC<Props> = (props) => {
  const [hireDesignerModal, setHireDesignerModal] = useState(false);

  const sections =
    props.currentTemplateType === 'Real Penned Letter' && props.currentProductId === 16
      ? DEFAULT_SECTIONS.filter((section) => section.name === '')
      : DEFAULT_SECTIONS.filter(
        (section) => !['photos', 'size', 'templates', 'upload'].includes(section.name)
      );

  return (
    <SidePanelWrap>
      <PolotnoSidePanel
        store={props.store}
        sections={[
          {
            ...CustomTemplateSection,
            Panel: (panelProps: any) => (
              <CustomTemplateSection.Panel
                {...panelProps}
                platformName={props.platformName}
                templateGalleryModal={props.templateGalleryModal}
                designerQueryAmount={props.designerQueryAmount}
                selectedSection={props.selectedSection}
                allowedTemplateSections={props.allowedTemplateSections}
                hireDesignerModal={hireDesignerModal}
                allowedAddOns={props.allowedAddOns}
                currentTheme={props.currentTheme}
                setHireDesignerModal={setHireDesignerModal}
                onCreateCustomTemplateQuery={props.onCreateCustomTemplateQuery}
                onGetTemplates={props.onGetTemplates}
                onGetOneTemplate={props.onGetOneTemplate}
                selectedTemplateType={props.selectedTemplateType}
              />
            ),
          },
          ...sections,
          ...(props.currentProductId !== 16 ? [{
            ...CustomUploadsV2Section,
            Panel: (panelProps: any) => (
              <CustomUploadsV2Section.Panel
                {...panelProps}
                onGetBrandingImages={props.onGetBrandingImages}
                onDeleteBrandingImage={props.onDeleteBrandingImage}
                onUploadBrandingImage={props.onUploadBrandingImage}
              />
            ),
          }] : []),
          {
            ...CustomFieldSection,
            Panel: (panelProps: any) => (
              <CustomFieldSection.Panel
                {...panelProps}
                onGetCustomFields={props.onGetCustomFields}
                allowSenderFields={props.allowSenderFields}
                excludedFields={props.excludedFields}
                allowPropertyFields={props.allowPropertyFields}
                platformName={props.platformName}
              />
            ),
          },
          ...(props.currentProductId !== 16
            ? [
              ...(props.currentProductId !== 4 && props.currentProductId !== 5 && props.currentProductId !== 38
                ? [
                  {
                    ...BlockColors,
                    Panel: (panelProps: any) => (
                      <BlockColors.Panel {...panelProps} />
                    ),
                  },
                ]
                : []),
              {
                ...CustomQRCode,
                Panel: (panelProps: any) => (
                  <CustomQRCode.Panel
                    {...panelProps}
                    currentTheme={props.currentTheme}
                    allowSenderFields={props.allowSenderFields}
                    allowPropertyFields={props.allowPropertyFields}
                    excludedFields={props.excludedFields}
                    onGetQRCodes={props.onGetQRCodes}
                    onDeleteQRCodes={props.onDeleteQRCodes}
                    onUploadQRCode={props.onUploadQRCode}
                    onEditQRCode={props.onEditQRCode}
                  />
                ),
              },
              {
                ...customAddOns,
                Panel: (panelProps: any) => (
                  <customAddOns.Panel
                    {...panelProps}
                    allowedAddOns={props.allowedAddOns}
                    propertyOfferCost={props.propertyOfferCost}
                    customPropertyOfferCost={props.customPropertyOfferCost}
                    gsvCost={props.gsvCost}
                  />
                ),
              },
            ] : []
          )
        ]}
        defaultSection="text"
      />
    </SidePanelWrap>
  );
};

export default SidePanel;