// 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 { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } 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 { Text } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { ArrowDownloadRegular } from "@fluentui/react-icons";

export const DataGridAccordion = () => {
    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-accordion-example {
        background-color: var(--colorNeutralBackground1);
        border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
        border-radius: var(--borderRadiusXLarge);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .data-grid-accordion-example__header-button.fui-AccordionHeader__button {
        padding-left: var(--spacingHorizontalM);
        padding-right: var(--spacingHorizontalM);
      }
      .data-grid-accordion-example__panel {
        margin: 0;
      }
      .data-grid-accordion-example__grid {
        border-left-width: 0;
        border-radius: 0;
        border-right-width: 0;
      }
      .data-grid-accordion-example__footer {
        align-items: center;
        column-gap: var(--spacingHorizontalM);
        display: flex;
        justify-content: space-between;
        padding: var(--spacingVerticalS) var(--spacingHorizontalM);
      }
    `;
    return (<>
        <style>{styles}</style>
        <Accordion className="data-grid-accordion-example" collapsible defaultOpenItems="files">
          <AccordionItem value="files">
            <AccordionHeader button={{ className: 'data-grid-accordion-example__header-button' }}>
              Shared documents
            </AccordionHeader>
            <AccordionPanel className="data-grid-accordion-example__panel">
              <DataGrid className="data-grid-accordion-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-accordion-example__footer">
                <Text preset="bodyStrong">Showing 4 of 128 items</Text>
                <Button appearance="transparent" icon={<ArrowDownloadRegular />}>
                  Export all
                </Button>
              </div>
            </AccordionPanel>
          </AccordionItem>
        </Accordion>
      </>);
};

export default DataGridAccordion;