import {
  InlineMessage,
  LoadingOverlay,
  Table,
  TalentButton,
  TalentButtonWithIcon,
  Typography,
} from "@komi-app/components";
import copyToClipboard from "copy-to-clipboard";
import React, { useRef, useState } from "react";
import { useEmailDomainQuery } from "../../queries";
import { EmailDomainDnsRecord } from "../../types";
import "./DnsRecordsStep.scss";

type DnsRecordsStepProps = {
  onPrevious: () => void;
  previousLabel: string;
  onNext: () => void;
  nextLabel: string;
};
export const DnsRecordsStep = ({
  nextLabel,
  onNext,
  onPrevious,
  previousLabel,
}: DnsRecordsStepProps) => {
  const query = useEmailDomainQuery();

  return (
    <div className="email-domain-setup-modal-dns-records-step">
      <LoadingOverlay loading={query.isLoading} variant="light">
        <Typography.Body color="gray-800">
          Log in to your domain provider and locate your DNS record settings. If
          you need help finding them, we suggest checking your provider’s site
          and their support resources.
          <br />
          <br /> Once you’ve located the settings, copy the DNS records below
          and paste them into the appropriate record fields at your domain
          provider’s site.
        </Typography.Body>
        <InlineMessage
          className="email-domain-setup-modal-dns-records-step__inline-message"
          message={
            "Note that it might take up to 48 hours for your record updates to fully propagate."
          }
        />
        <Table<EmailDomainDnsRecord>
          cellPadding="12px 16px"
          columns={[
            {
              id: "type",
              header: "Type",
              accessor: "type",
              width: 50,
              enableSorting: false,
            },
            {
              id: "host",
              header: "Host",
              accessor: "host",
              cell: ({ rowValue }) => (
                <div className="email-domain-setup-modal-dns-records-step__cell">
                  <span>{rowValue.host}</span>
                  <CopyButton text={rowValue.host} />
                </div>
              ),
              enableSorting: false,
            },
            {
              id: "value",
              header: "Value",
              accessor: "value",
              cell: ({ rowValue }) => (
                <div className="email-domain-setup-modal-dns-records-step__cell">
                  <span>{rowValue.value}</span>
                  <CopyButton text={rowValue.value} />
                </div>
              ),
              enableSorting: false,
            },
          ]}
          inputData={query.data?.value?.dnsRecords ?? []}
          loading={query.isLoading && { placeholderRowCount: 3 }}
          pagination="none"
        />

        <div className="email-domain-setup-modal-dns-records-step__actions">
          <TalentButton variant="secondary" onClick={onPrevious}>
            {previousLabel}
          </TalentButton>
          <TalentButton variant="primary" onClick={onNext}>
            {nextLabel}
          </TalentButton>
        </div>
      </LoadingOverlay>
    </div>
  );
};

function CopyButton({ text }: { text: string }) {
  const [justClicked, setJustClicked] = useState(false);
  const timeout = useRef<number | null>(null);

  return (
    <TalentButtonWithIcon
      label={justClicked ? "Copied!" : "Copy"}
      type="inline"
      onClick={() => {
        copyToClipboard(text);

        setJustClicked(true);
        if (timeout.current) {
          window.clearTimeout(timeout.current);
        }
        timeout.current = window.setTimeout(() => {
          setJustClicked(false);
        }, 2000);
      }}
    />
  );
}
