import { useState, type ReactNode } from "react";
import { History } from "lucide-react";
import { useFieldHistory, useFieldHistoryScope } from "../FieldHistory/FieldHistoryProvider";
import { FieldHistoryModal } from "../FieldHistory/FieldHistoryModal";
import { isEmptyFieldValue } from "../../utils/fieldHistory/isEmptyFieldValue";

/** A profile section's read view: rows holding one field, or two short ones side by side. */
export const ProfileRows = ({ children }: { children: ReactNode }) => (
  <div className="profile-fields">{children}</div>
);

export const ProfileRow = ({ children }: { children: ReactNode }) => (
  <div className="profile-fields__row">{children}</div>
);

/** The label; while the section's history is on, a changed field's label opens its history. */
const ProfileFieldLabel = ({ label, path }: { label: string; path?: string }) => {
  const scope = useFieldHistoryScope();
  const { isActive, getFieldHistory, attributionFor } = useFieldHistory();
  const [open, setOpen] = useState(false);
  const timeline = isActive && scope?.id && path ? getFieldHistory(scope.resourceType, scope.id, path, label) : null;

  if (!timeline) return <span className="profile-fields__k">{label}</span>;
  return (
    <>
      <button
        type="button"
        className="profile-fields__k profile-fields__k--changed"
        onClick={() => setOpen(true)}
      >
        <span className="sr-only">View history of</span>{" "}{label}
        <History aria-hidden="true" />
      </button>
      <FieldHistoryModal
        label={label}
        timeline={timeline}
        open={open}
        onClose={() => setOpen(false)}
        layout="list"
        attribution={scope?.id ? attributionFor(scope.resourceType, scope.id) : undefined}
      />
    </>
  );
};

export interface ProfileFieldProps {
  label: string;
  value?: ReactNode;
  path?: string;
  /** What a blank value reads as; a dash unless the question simply was not answered. */
  empty?: string;
  children?: ReactNode;
}

export const ProfileField = ({ label, value, path, empty = "—", children }: ProfileFieldProps) => {
  const blank = children === undefined && isEmptyFieldValue(value);
  return (
    <div className="profile-fields__col">
      <ProfileFieldLabel label={label} path={path} />
      {children ?? (
        <span className={blank && empty === "—" ? "profile-fields__v profile-fields__v--dash" : "profile-fields__v"}>
          {blank ? empty : value}
        </span>
      )}
    </div>
  );
};

/** One labelled control in a section's edit form; `wide` spans both columns. */
export const ProfileInput = ({
  id,
  label,
  wide = false,
  children,
}: {
  id?: string;
  label: string;
  wide?: boolean;
  children: ReactNode;
}) => (
  <div className={wide ? "profile-input profile-input--wide" : "profile-input"}>
    {id ? <label htmlFor={id} className="ak-label">{label}</label> : <span className="ak-label">{label}</span>}
    {children}
  </div>
);