import React from "react";
import { Typography } from "@komi-app/components";
import "./ReportDetails.scss";
import { Campaign } from "types/campaigns";
import moment from "moment";
import { useCampaignAnalyticsQuery } from "../queries";

export interface Props {
  campaign: Campaign | undefined;
  campaignId: string;
}

const CampaignReportDetailsV2 = ({ campaign, campaignId }: Props) => {
  const { data: analytics } = useCampaignAnalyticsQuery(campaignId);

  return (
    <section className="details-section">
      <div className="details-heading">
        <Typography.Body strong>Details</Typography.Body>
      </div>
      <div className="details-columns">
        <div className="details-column details-column--image">
          {campaign?.template?.thumbnailUrl && (
            <img
              className="template-image"
              src={campaign.template.thumbnailUrl}
              alt="Template"
            />
          )}
        </div>
        <div className="details-column">
          <Detail label="Subject" value={campaign?.subject} />
          <Detail
            label="Scheduled Send"
            value={
              campaign?.schedule.startTimestamp
                ? formatDate(campaign.schedule.startTimestamp)
                : undefined
            }
          />
        </div>
        <div className="details-column">
          <Detail
            label="Segment"
            value={
              campaign?.segments &&
              campaign.segments.map((x) => x.segmentName).join(", ")
            }
          />
          <Detail label="Recipients" value={analytics?.stats?.processed} />
        </div>
      </div>
    </section>
  );
};

export default CampaignReportDetailsV2;

function formatDate(value: number): string {
  return moment(value).format("MMM DD, yyyy h:mmA");
}

function Detail({
  label,
  value,
}: {
  label: string;
  value: string | number | undefined;
}) {
  return (
    <div className="detail">
      <div className="detail-label">
        <Typography.Body level={2} strong>
          {label}
        </Typography.Body>
      </div>
      <Typography.Body className="detail-value" level={2} color="gray-700">
        {value === undefined ? "--" : value}
      </Typography.Body>
    </div>
  );
}
