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

import type {Element} from "react";
import {useState} from "react";
import AutoSizer from "react-virtualized-auto-sizer";
import {StyleSheet, css} from "aphrodite";
import TextCell from "../TextCell";
import DeprecatedTable from "../DeprecatedTable";
import data from "./data.json";
import {
  columnAmount,
  columnCity,
  columnCompany,
  columnCta,
  columnDate,
  columnId,
  columnTask,
} from "./columnDefinitions";
import {type EditorConfig} from "../../demoTypes";
import type {ColumnDefinition} from "../DeprecatedTable";

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

/**
 * @title Column flexibility Example
 * @description Flexible columns are enabled by specifying the width with {weight: number, min?: number}. They eat up all the available space by proportion. Usually need to turn useFullWidth on. Pinned columns can't be flexible.
 */
export default function TableColumnFlexibility(): Element<"div"> {
  const [sortBy, setSortBy] = useState({
    columnId: "id",
    direction: "asc",
  });

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

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

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

  return (
    <div style={{width: "100%", height: "400px"}}>
      <AutoSizer>
        {({width, height}: {|+width: number, +height: number|}) => (
          <div style={{width, overflowX: "auto"}}>
            <div style={{width: "1800px"}}>
              <div className={css(styles.resize)} style={{height}}>
                <DeprecatedTable
                  useFullWidth={true}
                  data={data.slice(0, 100)}
                  columnDefinitions={columnDefinitions}
                  getUniqueRowId={data => data.id}
                  sortBy={sortBy}
                  onSortByChange={setSortBy}
                />
              </div>
            </div>
          </div>
        )}
      </AutoSizer>
    </div>
  );
}
const styles = StyleSheet.create({
  resize: {
    animationName: {
      from: {
        width: 1240,
      },
      "25%": {
        width: 1240,
      },
      to: {
        width: 1605,
      },
    },
    animationDuration: "2s",
    animationIterationCount: "infinite",
    animationDirection: "alternate",
  },
});