/**
 * TEAM: frontend_infra
 * @flow
 */

import type {Element} from "react";
import {useState} from "react";
import DeprecatedTable, {type ColumnDefinitionV2} from "../DeprecatedTable";
import TextCell from "../TextCell";
import {type EditorConfig} from "../../demoTypes";
import sailings, {type Sailing} from "./sailingsData";

export const liveDemoSettings: EditorConfig = {
  initialShowCode: false,
};

/* Naive comparison of MM/DD dates, disregarding years. This is only used for the purpose of
   demonstrating table sorting, and should not be used for prod code. */
const dateComparator = (
  dateGetter: Sailing => string,
  a: Sailing,
  b: Sailing
): number => {
  const [monthA, dayA] = dateGetter(a)
    .split("/")
    .map(n => parseInt(n, 10));
  const [monthB, dayB] = dateGetter(b)
    .split("/")
    .map(n => parseInt(n, 10));

  if (monthA !== monthB) {
    return monthA - monthB;
  }
  return dayA - dayB;
};

const columnDefinitions: Array<ColumnDefinitionV2<Sailing>> = [
  {
    id: "weekNumber",
    header: "Week",
    width: 50,
    render: sailing => (
      <TextCell value={sailing.weekNumber} horizontalAlign="center" />
    ),
    comparator: (a, b) => a.weekNumber - b.weekNumber,
  },
  {
    id: "vesselName",
    header: "Vessel",
    width: 175,
    render: sailing => <TextCell value={sailing.vesselName} />,
    comparator: (a, b) => a.vesselName.localeCompare(b.vesselName),
  },
  {
    id: "voyageNumber",
    header: "Voyage",
    width: 60,
    render: sailing => <TextCell value={sailing.voyageNumber} />,
    comparator: (a, b) => a.voyageNumber.localeCompare(b.voyageNumber),
  },
  {
    id: "port_0",
    header: "Shanghai",
    headerAlignment: "center",
    subColumns: [
      {
        id: "port_0_eta",
        header: "ETA",
        headerAlignment: "center",
        width: 40,
        render: sailing => (
          <TextCell value={sailing.portCalls[0].arrivalDate} />
        ),
        comparator: dateComparator.bind(
          null,
          sailing => sailing.portCalls[0].arrivalDate
        ),
      },
      {
        id: "port_0_etd",
        header: "ETD",
        headerAlignment: "center",
        width: 40,
        render: sailing => (
          <TextCell value={sailing.portCalls[0].departureDate} />
        ),
        comparator: dateComparator.bind(
          null,
          sailing => sailing.portCalls[0].departureDate
        ),
      },
    ],
  },
  {
    id: "port_1",
    header: "Ningbo",
    headerAlignment: "center",
    subColumns: [
      {
        id: "port_1_eta",
        header: "ETA",
        headerAlignment: "center",
        width: 40,
        render: sailing => (
          <TextCell value={sailing.portCalls[1].arrivalDate} />
        ),
        comparator: dateComparator.bind(
          null,
          sailing => sailing.portCalls[1].arrivalDate
        ),
      },
      {
        id: "port_1_etd",
        header: "ETD",
        headerAlignment: "center",
        width: 40,
        render: sailing => (
          <TextCell value={sailing.portCalls[1].departureDate} />
        ),
        comparator: dateComparator.bind(
          null,
          sailing => sailing.portCalls[1].departureDate
        ),
      },
    ],
  },
  {
    id: "port_2",
    header: "Los Angeles",
    headerAlignment: "center",
    subColumns: [
      {
        id: "port_2_eta",
        header: "ETA",
        headerAlignment: "center",
        width: 40,
        render: sailing => (
          <TextCell value={sailing.portCalls[2].arrivalDate} />
        ),
        comparator: dateComparator.bind(
          null,
          sailing => sailing.portCalls[2].arrivalDate
        ),
      },
      {
        id: "port_2_etd",
        header: "ETD",
        headerAlignment: "center",
        width: 40,
        render: sailing => (
          <TextCell value={sailing.portCalls[2].departureDate} />
        ),
        comparator: dateComparator.bind(
          null,
          sailing => sailing.portCalls[2].departureDate
        ),
      },
    ],
  },
];

/**
 * @title DeprecatedTable with Sub-columns
 * @description Defining `subColumns` will render an additional header row. Grouped columns will move together when pinned, and show/hide together if customization is enabled. Sorting can still be defined on individual sub-columns. The flow type `ColumnDefinitionV2` should be used for defining parent columns.
 */
export default function TableSubColumns(): Element<"div"> {
  const [sortBy, setSortBy] = useState({
    columnId: "weekNumber",
    direction: "asc",
  });

  return (
    <div style={{height: "400px", width: "100%"}}>
      <DeprecatedTable
        data={sailings}
        compactCells={true}
        columnDefinitions={columnDefinitions}
        getUniqueRowId={sailings => sailings.weekNumber.toString()}
        sortBy={sortBy}
        onSortByChange={setSortBy}
      />
    </div>
  );
}