import { Card, Row, Col } from "../shared/layout";
import { TangledLogo } from "../shared/logo";
import { CardHeader } from "../shared/card-header";
import { FooterStats } from "../shared/footer-stats";
import { CardFooter } from "../shared/card-footer";
import { COLORS, TYPOGRAPHY } from "../shared/constants";
import { pluralize } from "../../lib/pluralize";
import type { CommitCardData } from "../../validation";

const BAR_HEIGHT = 28;

interface DiffBarProps {
  additions: number;
  deletions: number;
  filesChanged: number;
  shortHash: string;
}

function DiffBar({ additions, deletions, filesChanged, shortHash }: DiffBarProps) {
  const share = additions / (additions + deletions);
  return (
    <Col style={{ gap: 18 }}>
      <Row style={{ height: BAR_HEIGHT, width: "100%", gap: 6 }}>
        {additions > 0 ? (
          <div
            style={{
              display: "flex",
              height: BAR_HEIGHT,
              flexGrow: share,
              borderRadius: 8,
              backgroundColor: COLORS.diff.additions.text,
            }}
          />
        ) : null}
        {deletions > 0 ? (
          <div
            style={{
              display: "flex",
              height: BAR_HEIGHT,
              flexGrow: 1 - share,
              borderRadius: 8,
              backgroundColor: COLORS.diff.deletions.text,
            }}
          />
        ) : null}
      </Row>
      <Row style={{ gap: 36 }}>
        <span style={{ ...TYPOGRAPHY.body, color: COLORS.diff.additions.text }}>
          +{additions} {pluralize("addition", additions)}
        </span>
        <span style={{ ...TYPOGRAPHY.body, color: COLORS.diff.deletions.text }}>
          -{deletions} {pluralize("deletion", deletions)}
        </span>
        <span style={{ ...TYPOGRAPHY.body, color: COLORS.textSecondary }}>
          {filesChanged} {pluralize("file", filesChanged)} · {shortHash}
        </span>
      </Row>
    </Col>
  );
}

export function CommitCard(data: CommitCardData) {
  const hasDiff = data.additions + data.deletions > 0;
  return (
    <Card>
      <Col style={{ gap: 40 }}>
        <Col style={{ gap: 32 }}>
          <CardHeader
            avatarUrl={data.avatarUrl}
            ownerHandle={data.ownerHandle}
            repoName={data.repoName}
          />
          <div
            style={{
              ...TYPOGRAPHY.title,
              color: COLORS.text,
              display: "block",
              lineClamp: hasDiff ? 2 : `3 "... ${data.shortHash}"`,
            }}>
            {data.subject}
          </div>
        </Col>

        {hasDiff ? (
          <DiffBar
            additions={data.additions}
            deletions={data.deletions}
            filesChanged={data.filesChanged}
            shortHash={data.shortHash}
          />
        ) : null}
      </Col>

      <CardFooter>
        <FooterStats
          createdAt={data.createdAt}
          authorHandle={data.authorHandle}
          authorAvatarUrl={data.authorAvatarUrl}
        />
        <TangledLogo />
      </CardFooter>
    </Card>
  );
}