import "./EmbedPage.scss";

import {
  InlineMessage,
  TalentButtonWithIcon,
  Typography,
} from "@komi-app/components";
import { Button, Card, Col, Row } from "antd";
import { useEmbedDcmApprovedDomainsSetup } from "components/ProfileSettings/AudiencesAndCampaigns/EmailDomainSetup/Modals/ModalSteps/EmbedDcmApprovedDomainsSetup/EmbedDcmApprovedDomainsSetup";
import { useEmbedDcmSetupModa } from "components/ProfileSettings/AudiencesAndCampaigns/EmailDomainSetup/Modals/ModalSteps/EmbedDcmSetup";
import React, { useEffect } from "react";
import copy from "copy-to-clipboard";
import { EmbedDcm } from "@komi-app/edcm-ui";
import "@komi-app/edcm-ui/dist/esm/index.css";

import {
  useEdcmApprovedDomains,
  useEcdmConfig,
  useEdcmPrivacyPolicy,
  useEdcmResolve,
} from "./utils";
import notification from "utils/notification";
import Loading from "components/Loading";
import config from "config";
const EmbedPage = () => {
  const { edcmId, isSuccess, isError, isLoading } = useEdcmResolve();
  const { edcmConfig } = useEcdmConfig(edcmId, !isLoading);

  const setupModal = useEmbedDcmSetupModa();
  const approvedDomainsModal = useEmbedDcmApprovedDomainsSetup();

  const { approvedDomains } = useEdcmApprovedDomains(edcmId);

  const privacyPolicy = useEdcmPrivacyPolicy();

  useEffect(() => {
    if (isError) {
      notification.error({
        message: `Something went wrong. Please try again`,
      });
    }
  }, [isError]);

  return (
    <div data-testid="embed_website_wrapped" className="embed-page">
      {isLoading && <Loading />}
      <Row>
        <Col span={12} className="p--24 p__r--12">
          <InlineMessage
            className="m__b--24"
            data-testid="embed-page-setup-message"
            type="info"
            message="Once you install the form on your website, any changes made here will be applied automatically."
            closeable={true}
          />

          <Card className="m__b--24">
            <div className="m__b--16">
              <Typography.Heading level={4} className="m__b--8">
                Website Embed
              </Typography.Heading>
              <Typography.Body level={2}>
                You have the option to embed a Komi form onto your website and
                customize the appearance, allowing it to seamlessly blend with
                your aesthetic. <br />
                <br />
                All contacts collected will be added directly into Komi.
              </Typography.Body>
            </div>
            <TalentButtonWithIcon
              onClick={() => setupModal.open(edcmId)}
              data-testid="embed-page-add-domain-button"
              prefixIcon="pencil"
              label="Customize Appearance"
              type="text"
              disabled={isLoading || !isSuccess}
            />
          </Card>

          <Card>
            <div className="m__b--16">
              <Typography.Heading level={4} className="m__b--8">
                Installation
              </Typography.Heading>
              {!approvedDomains || approvedDomains.length === 0 ? (
                <Typography.Body level={2}>
                  To add the form to your website, you need to specify which
                  domains you&apos;ll be adding it to first. The form will not
                  appear on any sites not added here.
                </Typography.Body>
              ) : (
                <>
                  <Card>
                    <div className="flex flex-row justify__content--between">
                      <div className="">
                        <Typography.Heading level={4}>
                          Approved domains
                        </Typography.Heading>
                        <Typography.Body>
                          {approvedDomains.join(", ")}
                        </Typography.Body>
                      </div>
                      <Button
                        type="text"
                        data-testid="embed-page-edit-domain-button"
                        onClick={() => approvedDomainsModal.open(edcmId)}
                        disabled={isLoading || !edcmId}
                      >
                        <div className="text--blue top--0 right--0 absolute">
                          Edit
                        </div>
                      </Button>
                    </div>
                  </Card>

                  {edcmId && (
                    <>
                      <div className="m__t--8">
                        <p className="m--0">
                          Install the form code on your website
                        </p>
                        <CopyableInstruction>
                          {`<iframe src="${config.edcm.url}/v1/serve/${edcmId}" id="komi-edcm-iframe" height="300" width="450" style="border:none;"></iframe>`}
                        </CopyableInstruction>
                      </div>

                      <div className="m__t--8">
                        <p className="m--0">
                          Also add the following script tag in your
                          website&apos;s head tag
                        </p>
                        <CopyableInstruction>
                          {`<script src="${config.assets.staticUrl}/edcm/iframe-resizer.js"></script>`}
                        </CopyableInstruction>
                      </div>
                    </>
                  )}
                </>
              )}
            </div>

            {approvedDomains?.length === 0 ? (
              <TalentButtonWithIcon
                onClick={() => approvedDomainsModal.open(edcmId)}
                disabled={isLoading || !edcmId}
                data-testid="embed-page-add-domain-button"
                prefixIcon="addFilled"
                label="Add Domains"
                type="text"
              />
            ) : null}
          </Card>
        </Col>
        <Col span={12} className="p--24 p__l--12">
          <div className="embed-page--preview">
            {edcmConfig.data ? (
              <EmbedDcm
                id="preview-edcm"
                {...edcmConfig.data}
                privacyPolicy={privacyPolicy}
                previewMode={true}
              />
            ) : null}
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default EmbedPage;

interface CopyableInstructionProps {
  children: string;
}

function CopyableInstruction({ children }: CopyableInstructionProps) {
  return (
    <Card>
      <div className="flex flex-row justify__content--between">
        <div className="copyable-content-wrapper">
          <Typography.Heading level={5}>{children}</Typography.Heading>
        </div>
        <Button
          type="text"
          data-testid="embed-page-edit-domain-button"
          onClick={() => {
            copy(children);
            notification.success({
              message: `Copied`,
            });
          }}
        >
          <div className="text--blue top--0 right--0 absolute">Copy</div>
        </Button>
      </div>
    </Card>
  );
}
