import { useEffect, useState } from "react";
import {
  EmailContent,
  EmailContentHeader,
  EmailItem,
  EmailListWrapper,
  EmailWrapper,
} from "./administration.styles";
import { apiCall } from "../../untils/apiCall";
import { ContentWrapper } from "../../components/components";

export const EmailTemplates = () => {
  const [templates, setTemplates] = useState<any[]>([]);
  const [focusTemplate, setFocusTemplate] = useState("");

  useEffect(() => {
    apiCall("admin/getEmailTemplates", {}, (response: any) => {
      setTemplates(response.templates);
    });
  }, []);

  const getTemplatesList = () => {
    return templates.map((template: any) => (
      <EmailItem
        key={template.id}
        isActive={focusTemplate === template.id}
        onClick={() => setFocusTemplate(template.id)}
      >
        {template.name}
      </EmailItem>
    ));
  };

  const getTemplateContent = (templateID: string) => {
    if (templateID && templates.length > 0) {
      const template = templates.find((t: any) => t.id === templateID);
      if (template) {
        return template.code;
      }
    }
  };
  const getTemplateTitle = (templateID: string) => {
    if (templateID && templates.length > 0) {
      const template = templates.find((t: any) => t.id === templateID);
      if (template) {
        return template.title;
      }
    }
  };
  return (
    <EmailWrapper>
      <EmailListWrapper>
        <ContentWrapper componentHeight="calc(100vh - 14.4rem)">
          {getTemplatesList()}
        </ContentWrapper>
      </EmailListWrapper>
      <EmailContent>
        <ContentWrapper componentHeight="calc(100vh - 14.4rem)">
          <EmailContentHeader>
            {focusTemplate
              ? `${getTemplateTitle(focusTemplate)}`
              : "Select a template to view its content"}
          </EmailContentHeader>

          {focusTemplate && (
            <iframe
              title="Email Template Preview"
              style={{ width: "100%", height: "100%", border: "none" }}
              srcDoc={`${getTemplateContent(focusTemplate)}`}
            />
          )}
        </ContentWrapper>
      </EmailContent>
    </EmailWrapper>
  );
};