import React, { useState } from 'react';

// Utils
import { MESSAGES } from '../../../../../utils/message';

// // icons
import Typography from '../../../../GenericUIBlocks/Typography';
// @ts-ignore
import LeftArrow from '../../../../../assets/images/templates/left-arrow.svg';
// @ts-ignore
import RightArrow from '../../../../../assets/images/templates/right-arrow.svg';

// styles
import './styles.scss';

const TemplatesCard = (props: any) => {
  const {
    templates,
    loading,
    handleLoadTemplateModel,
    platformName,
    currentTemplateType,
    product,
    searchApplied,
    primaryColorRGBA,
    designerQueryAmount,
  } = props;

  const [isFilpedIds, setIsFlipedIds] = useState<string[]>([]);

  const singleSideProducts = [2, 4, 5, 16];

  // handler for Flip
  const handleFlip = (templateId: string) => {
    const existingTemplateIds = isFilpedIds || [];
    let updatedIds: string[];
    if (existingTemplateIds.includes(templateId)) {
      updatedIds = existingTemplateIds.filter((item) => item !== templateId);
    } else {
      updatedIds = [...existingTemplateIds, templateId];
    }
    setIsFlipedIds(updatedIds);
  };

  // handler for setting color
  const colorSetter = (templateId: any, side: string) => {
    const result =
      !isFilpedIds.includes(templateId) && side === 'Front'
        ? { fill: '#FFFFFF' }
        : isFilpedIds.includes(templateId) && side === 'Back'
          ? { fill: '#FFFFFF' }
          : { fill: '#878585' };
    return result;
  };

  // handler for setting rotation
  const transformSetter = (templateId: any) => {
    const result = isFilpedIds.includes(templateId)
      ? {
        transform: 'rotateY(0deg)',
      }
      : {
        transform: 'rotateY(360deg)',
      };
    return result;
  };

  return (
    <>
      {loading ? (
        <div className="noTemplateGallery-v2">
          <Typography>{MESSAGES.TEMPLATE.LOADING_TEMPLATE}</Typography>
        </div>
      ) : templates.length ? (
        templates.map((template: any, index: string) => {
          return (
            <div className="templateCard-v2" key={index}>
              <div className="templateImage">
                <img
                  src={
                    isFilpedIds.includes(template?.id)
                      ? template.backThumbnailUrl
                      : template.thumbnailUrl
                  }
                  alt="template"
                  style={transformSetter(template?.id)}
                  loading="lazy"
                />
                {!singleSideProducts.includes(Number(product?.id)) && (
                  <>
                    <img src={LeftArrow} alt="back" className="left-arrow" onClick={() => handleFlip(template?.id)} />
                    <img src={RightArrow} alt="front" className="right-arrow" onClick={() => handleFlip(template?.id)} />
                  </>
                )}
              </div>
              <div className="title-btn-container">
                <Typography className="templateName">
                  {template?.title}
                </Typography>
                <button
                  className="tempButton"
                  onClick={() => handleLoadTemplateModel(template)}
                >
                  Use Template
                </button>
              </div>
            </div>
          );
        })
      ) : currentTemplateType?.id === '1' ? (
        <div
          className={`${+product?.id === 5 && designerQueryAmount
              ? 'noTemplateGallery-v2 more-visible'
              : product?.productType === 'Professional Letters'
                ? 'noTemplateGallery-v2 noTemplateProfessionalAndPersonal'
                : 'noTemplateGallery-v2'
            }`}
        >
          <Typography>{MESSAGES.TEMPLATE.NO_MY_TEMPLATES}</Typography>
        </div>
      ) : currentTemplateType?.id === '2' ? (
        <div
          className={`${+product?.id === 5 && designerQueryAmount ? 'noTemplateGallery-v2 more-visible' : 'noTemplateGallery-v2'}`}
        >
          <Typography>{MESSAGES.TEMPLATE.NO_TEAM_TEMPLATES}</Typography>
        </div>
      ) : currentTemplateType?.id === '3' ? (
        <div
          className={`${+product?.id === 5 && designerQueryAmount
              ? 'noTemplateGallery-v2 more-visible'
              : product?.productType === 'Professional Letters'
                ? 'noTemplateGallery-v2 noTemplateProfessionalAndPersonal'
                : 'noTemplateGallery-v2'
            }`}
        >
          <Typography>
            {platformName
              ? `No ${platformName} Templates to show`
              : MESSAGES.TEMPLATE.NO_OLC_TEMPLATES}
          </Typography>
        </div>
      ) : (
        <></>
      )}
    </>
  );
};

export default TemplatesCard;
