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

import type { JSXElement } from "@coreai-ds/react-components";
import { DataGrid } from "@coreai-ds/react-components";
import type { PresenceBadgeStatus } from "@coreai-ds/react-components";
import { DocumentRegular } from "@fluentui/react-icons";
import { FolderRegular } from "@fluentui/react-icons";
import { VideoRegular } from "@fluentui/react-icons";
import { DocumentPdfRegular } 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 { Button } from "@coreai-ds/react-components";
import { EditRegular } from "@fluentui/react-icons";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MoreHorizontalRegular } from "@fluentui/react-icons";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { Avatar } from "@coreai-ds/react-components";
import { OpenRegular } from "@fluentui/react-icons";
import { DeleteRegular } from "@fluentui/react-icons";
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 type { TableColumnId } from "@coreai-ds/react-components";
import type { DataGridCellFocusMode } from "@coreai-ds/react-components";
import * as React from 'react';

type FileCell = {
    label: string;
    icon: JSXElement;
};

type AuthorCell = {
    label: string;
    status: PresenceBadgeStatus;
};

type LastUpdatedCell = {
    label: string;
    timestamp: number;
};

type Item = {
    file: FileCell;
    author: AuthorCell;
    lastUpdated: LastUpdatedCell;
};

const items: Item[] = [
    {
        file: { label: 'Meeting notes', icon: <DocumentRegular /> },
        author: { label: 'Max Mustermann', status: 'available' },
        lastUpdated: { label: '7h ago', timestamp: 1 },
    },
    {
        file: { label: 'Thursday presentation', icon: <FolderRegular /> },
        author: { label: 'Erika Mustermann', status: 'busy' },
        lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
    },
    {
        file: { label: 'Training recording', icon: <VideoRegular /> },
        author: { label: 'John Doe', status: 'away' },
        lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
    },
    {
        file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
        author: { label: 'Jane Doe', status: 'offline' },
        lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 3 },
    },
];

const columns: TableColumnDefinition<Item>[] = [
    createTableColumn<Item>({
        columnId: 'file',
        compare: (a, b) => {
            return a.file.label.localeCompare(b.file.label);
        },
        renderHeaderCell: () => {
            return 'File';
        },
        renderCell: item => {
            return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
        },
    }),
    createTableColumn<Item>({
        columnId: 'author',
        renderHeaderCell: () => {
            return (<>
          Author
          <Button appearance="transparent" aria-label="Edit" icon={<EditRegular />}/>
          <Menu positioning={{ autoSize: true }}>
            <MenuTrigger disableButtonEnhancement>
              <Button appearance="transparent" icon={<MoreHorizontalRegular />} aria-label="More options"/>
            </MenuTrigger>

            <MenuPopover>
              <MenuList>
                <MenuItem>Delete column</MenuItem>
                <MenuItem>Create new author</MenuItem>
              </MenuList>
            </MenuPopover>
          </Menu>
        </>);
        },
        renderCell: item => {
            return (<TableCellLayout media={<Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }}/>}>
          {item.author.label}
        </TableCellLayout>);
        },
    }),
    createTableColumn<Item>({
        columnId: 'singleAction',
        renderHeaderCell: () => {
            return 'Single action';
        },
        renderCell: () => {
            return <Button icon={<OpenRegular />}>Open</Button>;
        },
    }),
    createTableColumn<Item>({
        columnId: 'actions',
        renderHeaderCell: () => {
            return 'Actions';
        },
        renderCell: () => {
            return (<>
          <Button aria-label="Edit" icon={<EditRegular />}/>
          <Button aria-label="Delete" icon={<DeleteRegular />}/>
        </>);
        },
    }),
];

const getCellFocusMode = (columnId: TableColumnId): DataGridCellFocusMode => {
    switch (columnId) {
        case 'singleAction':
            return 'none';
        case 'actions':
            return 'group';
        default:
            return 'cell';
    }
};

export const FocusableElementsInCells = (): JSXElement => {
    return (<DataGrid items={items} columns={columns} sortable selectionMode="multiselect" getRowId={item => item.file.label} onSelectionChange={(e, data) => console.log(data)} style={{ minWidth: '550px' }}>
      <DataGridHeader>
        <DataGridRow selectionCell={{ checkboxIndicator: { 'aria-label': 'Select all rows' } }}>
          {({ columnId, renderHeaderCell }) => (<DataGridHeaderCell focusMode={columnId === 'author' ? 'group' : undefined}>
              {renderHeaderCell()}
            </DataGridHeaderCell>)}
        </DataGridRow>
      </DataGridHeader>
      <DataGridBody<Item>>
        {({ item, rowId }) => (<DataGridRow<Item> key={rowId} selectionCell={{ checkboxIndicator: { 'aria-label': 'Select row' } }}>
            {({ renderCell, columnId }) => (<DataGridCell focusMode={getCellFocusMode(columnId)}>{renderCell(item)}</DataGridCell>)}
          </DataGridRow>)}
      </DataGridBody>
    </DataGrid>);
};

export default FocusableElementsInCells;