// 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 { 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";

export const Default = () => {
    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-default-example {
        min-width: 550px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <DataGrid className="data-grid-default-example" 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>
      </>);
};

export default Default;