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

import TextCell from "../TextCell";
import InteractableCell from "../InteractableCell";
import Button from "../../button/Button";
import {type ColumnDefinition} from "../DeprecatedTable";
import TextCellWithBadge from "../TextCellWithBadge";

export const columnId: ColumnDefinition<any> = {
  id: "id",
  header: "ID",
  render: row => (
    <TextCell value={row.id} verticalAlign="center" horizontalAlign="start" />
  ),
  width: 50,
  comparator: (a, b) => a.id - b.id,
  aggregateComparator: (as, bs) => as.length - bs.length,
};

export const columnName: ColumnDefinition<any> = {
  id: "name",
  header: "Name",
  render: row => (
    <TextCell value={row.name} verticalAlign="center" horizontalAlign="start" />
  ),
  width: 150,
  comparator: (a, b) => a.name.localeCompare(b.name),
};

export const columnEmail: ColumnDefinition<any> = {
  id: "email",
  header: "Email",
  render: row => (
    <TextCell
      value={row.email}
      verticalAlign="center"
      horizontalAlign="start"
    />
  ),
  width: 200,
  comparator: (a, b) => a.email.localeCompare(b.email),
};

export const columnDate: ColumnDefinition<any> = {
  id: "date",
  header: "Date",
  render: row => (
    <TextCell value={row.date} verticalAlign="center" horizontalAlign="start" />
  ),
  width: 200,
  comparator: (a, b) => new Date(a.date) - new Date(b.date),
};

export const columnCity: ColumnDefinition<any> = {
  id: "city",
  header: "City",
  render: row => (
    <TextCell value={row.city} verticalAlign="center" horizontalAlign="start" />
  ),
  width: 150,
  comparator: (a, b) => a.city.localeCompare(b.city),
};

export const columnAmount: ColumnDefinition<any> = {
  id: "amount",
  header: "Amount",
  headerAlignment: "right",
  render: row => (
    <TextCell value={row.amount} verticalAlign="center" horizontalAlign="end" />
  ),
  width: 70,
  comparator: (a, b) => a.amount - b.amount,
};

export const columnCompany: ColumnDefinition<any> = {
  id: "company",
  header: "Company",
  render: row => (
    <TextCell
      value={row.company}
      verticalAlign="center"
      horizontalAlign="start"
    />
  ),
  width: 100,
};

export const columnTask: ColumnDefinition<any> = {
  id: "task",
  header: "Task Status",
  render: row => (
    <TextCellWithBadge
      status={
        row.id % 4 === 0
          ? null
          : ["active", "complete", "pending", "error", "done", "due-soon"][
              row.id % 6
            ]
      }
      value={row.task}
      tooltipText={row.id % 3 === 0 ? row.task : null}
    />
  ),
  width: 100,
};

export const columnCta: ColumnDefinition<any> = {
  id: "cta",
  header: "",
  render: () => (
    <InteractableCell>
      <Button size="s" onClick={() => {}}>
        CTA
      </Button>
    </InteractableCell>
  ),
  width: 75,
};

const columnDefinitions: Array<ColumnDefinition<any>> = [
  columnId,
  columnName,
  columnEmail,
  columnDate,
  columnCity,
  columnAmount,
  columnCompany,
  columnTask,
  columnCta,
];

export default columnDefinitions;