import React from "react";
import AxisItemRow from "./AxisItemRow";
import axisDefinitions from "../data/axisDefinitions";

// TC_REL and CC are judged once per video (not per event) - shown after all
// event cards, per the guideline's hierarchy: A/V -> AVB -> TC_REL/TC_COUNT -> CC.
export default function VideoLevelAxes({
  video,
  temporalConstraintDescription,
  onChangeField,
  isPractice = false,
  grading
}) {
  return (
    <section className="video-level-axes">
      <h3>Whole-video judgments</h3>

      <div className="event-axis-rows">
        <div className="axis-context">
          <span className="axis-context-label">Temporal constraint</span>
          <p>{temporalConstraintDescription}</p>
        </div>
        <AxisItemRow
          axisKey={axisDefinitions.tcRel.key}
          title={axisDefinitions.tcRel.title}
          summary={axisDefinitions.tcRel.summary}
          kind="verdict"
          value={video.tcRel.label}
          rationale={video.tcRel.rationale}
          onChangeValue={(value) => onChangeField("tcRel", "label", value)}
          onChangeRationale={(value) => onChangeField("tcRel", "rationale", value)}
          isPractice={isPractice}
          grading={grading && grading.tcRel}
        />

        <AxisItemRow
          axisKey={axisDefinitions.cc.key}
          title={axisDefinitions.cc.title}
          summary={axisDefinitions.cc.summary}
          kind="verdict"
          value={video.cc.label}
          rationale={video.cc.rationale}
          onChangeValue={(value) => onChangeField("cc", "label", value)}
          onChangeRationale={(value) => onChangeField("cc", "rationale", value)}
          isPractice={isPractice}
          grading={grading && grading.cc}
        />
      </div>
    </section>
  );
}