// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import type { PresenceBadgeStatus } from "@coreai-ds/react-components";
import { DocumentRegular } from "@fluentui/react-icons";
import { EditRegular } from "@fluentui/react-icons";
import { FolderRegular } from "@fluentui/react-icons";
import { OpenRegular } from "@fluentui/react-icons";
import { VideoRegular } from "@fluentui/react-icons";
import { DocumentPdfRegular } from "@fluentui/react-icons";
import { PeopleRegular } from "@fluentui/react-icons";
import type { TableColumnDefinition } from "@coreai-ds/react-components";
import { createTableColumn } from "@coreai-ds/react-components";
import { TableCellLayout } from "@coreai-ds/react-components";
import { Avatar } from "@coreai-ds/react-components";
import { Text } from "@coreai-ds/react-components";
import { DataGrid } from "@coreai-ds/react-components";
import { DataGridHeader } from "@coreai-ds/react-components";
import { DataGridRow } from "@coreai-ds/react-components";
import { DataGridHeaderCell } from "@coreai-ds/react-components";
import { DataGridBody } from "@coreai-ds/react-components";
import { DataGridCell } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { ArrowDownloadRegular } from "@fluentui/react-icons";

export const DataGridCard = () => {
    type Item = {
        file: {
            label: string;
            icon: React.JSX.Element;
        };
        author: {
            label: string;
            status: PresenceBadgeStatus;
        };
        lastUpdated: {
            label: string;
            timestamp: number;
        };
        lastUpdate: {
            label: string;
            icon: React.JSX.Element;
        };
    };
    const items: Item[] = [
        {
            file: { label: 'Meeting notes', icon: <DocumentRegular /> },
            author: { label: 'Max Mustermann', status: 'available' },
            lastUpdated: { label: '7h ago', timestamp: 1 },
            lastUpdate: { label: 'You edited this', icon: <EditRegular /> },
        },
        {
            file: { label: 'Thursday presentation', icon: <FolderRegular /> },
            author: { label: 'Erika Mustermann', status: 'busy' },
            lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
            lastUpdate: { label: 'You recently opened this', icon: <OpenRegular /> },
        },
        {
            file: { label: 'Training recording', icon: <VideoRegular /> },
            author: { label: 'John Doe', status: 'away' },
            lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
            lastUpdate: { label: 'You recently opened this', icon: <OpenRegular /> },
        },
        {
            file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
            author: { label: 'Jane Doe', status: 'offline' },
            lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
            lastUpdate: { label: 'You shared this in a Teams chat', icon: <PeopleRegular /> },
        },
    ];
    const columns: TableColumnDefinition<Item>[] = [
        createTableColumn<Item>({
            columnId: 'file',
            compare: (first, second) => first.file.label.localeCompare(second.file.label),
            renderHeaderCell: () => 'File',
            renderCell: (item) => (<TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>),
        }),
        createTableColumn<Item>({
            columnId: 'author',
            compare: (first, second) => first.author.label.localeCompare(second.author.label),
            renderHeaderCell: () => 'Author',
            renderCell: (item) => (<TableCellLayout media={<Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }}/>}>
            {item.author.label}
          </TableCellLayout>),
        }),
        createTableColumn<Item>({
            columnId: 'lastUpdated',
            compare: (first, second) => first.lastUpdated.timestamp - second.lastUpdated.timestamp,
            renderHeaderCell: () => 'Last updated',
            renderCell: (item) => item.lastUpdated.label,
        }),
        createTableColumn<Item>({
            columnId: 'lastUpdate',
            compare: (first, second) => first.lastUpdate.label.localeCompare(second.lastUpdate.label),
            renderHeaderCell: () => 'Last update',
            renderCell: (item) => (<TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>),
        }),
    ];
    const styles = /* css */ `
      .data-grid-card-example {
        background-color: var(--colorNeutralBackground1);
        border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
        border-radius: var(--borderRadiusXLarge);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .data-grid-card-example__header {
        display: flex;
        flex-direction: column;
        padding: var(--spacingVerticalM) var(--spacingHorizontalM);
        row-gap: var(--spacingVerticalXXS);
      }
      .data-grid-card-example__grid {
        border-left-width: 0;
        border-radius: 0;
        border-right-width: 0;
      }
      .data-grid-card-example__footer {
        align-items: center;
        column-gap: var(--spacingHorizontalM);
        display: flex;
        justify-content: space-between;
        padding: var(--spacingVerticalS) var(--spacingHorizontalM);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="data-grid-card-example">
          <div className="data-grid-card-example__header">
            <Text preset="heading4">Shared documents</Text>
            <Text preset="bodyS">4 files · Updated 7h ago</Text>
          </div>

          <DataGrid className="data-grid-card-example__grid" items={items} columns={columns} sortable selectionMode="multiselect" getRowId={(item) => item.file.label} focusMode="composite">
            <DataGridHeader>
              <DataGridRow selectionCell={{
            checkboxIndicator: { 'aria-label': 'Select all rows' },
        }}>
                {({ renderHeaderCell }) => (<DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>)}
              </DataGridRow>
            </DataGridHeader>
            <DataGridBody<Item>>
              {({ item, rowId }) => (<DataGridRow<Item> key={rowId} selectionCell={{
                checkboxIndicator: { 'aria-label': 'Select row' },
            }}>
                  {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
                </DataGridRow>)}
            </DataGridBody>
          </DataGrid>

          <div className="data-grid-card-example__footer">
            <Text preset="bodyStrong">Showing 4 of 128 items</Text>
            <Button appearance="transparent" icon={<ArrowDownloadRegular />}>
              Export all
            </Button>
          </div>
        </div>
      </>);
};

export default DataGridCard;