import { setContributionPrivacy } from "~/fns/contributions";
import type { getContributions } from "~/fns/contributions";
import { useAction } from "~/hooks/use-action";
import { ContributionGraph } from "./ContributionGraph";
import { ContributionDayDetails } from "./ContributionDayDetails";

type Contributions = NonNullable<Awaited<ReturnType<typeof getContributions>>>;

/** Only the account itself sees this: whether visitors get anonymous counts of private contributions. */
function PrivacyToggle({ showPrivate }: { showPrivate: boolean }) {
  const action = useAction(setContributionPrivacy);
  return (
    <label className="ml-auto flex items-center gap-2 text-xs text-kumo-subtle">
      <input
        type="checkbox"
        checked={showPrivate}
        disabled={action.pending}
        onChange={(event) => void action.run({ data: { showPrivate: event.currentTarget.checked } })}
        className="accent-accent-500"
      />
      Show private contributions to visitors
      {action.error && (
        <span role="alert" className="text-kumo-danger">
          {action.error}
        </span>
      )}
    </label>
  );
}

export function ContributionSection({ owner, contributions }: { owner: string; contributions: Contributions }) {
  return (
    <div className="space-y-3">
      <ContributionGraph
        days={contributions.days}
        years={contributions.years}
        year={contributions.year}
        owner={owner}
        selected={contributions.detail?.day ?? null}
        actions={contributions.isSelf ? <PrivacyToggle showPrivate={contributions.showPrivateToVisitors} /> : null}
      />
      {contributions.detail && <ContributionDayDetails owner={owner} detail={contributions.detail} />}
    </div>
  );
}