import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { createComponent } from '@workday/canvas-kit-react/common';
import { Table } from '@workday/canvas-kit-react/table';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { Text } from '@workday/canvas-kit-react/text';
import { sortDownIcon, sortUpIcon } from '@workday/canvas-system-icons-web';
import { createStyles } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const countryData = [
    { country: 'Australia', capital: 'Canberra', population: 25690000 },
    { country: 'Bahamas', capital: 'Nassau', population: 407906 },
    { country: 'Canada', capital: 'Ottawa', population: 38250000 },
    { country: 'Fiji', capital: 'Suva', population: 924610 },
    { country: 'Ghana', capital: 'Accra', population: 32830000 },
    { country: 'Hong Kong', capital: 'City of Victoria', population: 7413000 },
    { country: 'India', capital: 'New Delhi', population: 1408000000 },
    { country: 'Ireland', capital: 'Dublin', population: 5033000 },
    { country: 'Jamaica', capital: 'Kingston', population: 2828000 },
    { country: 'Kenya', capital: 'Nairobi', population: 53010000 },
    { country: 'Micronesia', capital: 'Palikir', population: 113131 },
    { country: 'New Zealand', capital: 'Wellington', population: 5123000 },
    { country: 'Philippines', capital: 'Manila', population: 113900000 },
    { country: 'Puerto Rico', capital: 'San Juan', population: 3264000 },
    { country: 'Samoa', capital: 'Apia', population: 218764 },
    { country: 'Singapore', capital: 'Singapore', population: 5454000 },
    { country: 'Tanzania', capital: 'Dodoma', population: 63590000 },
    { country: 'United Kingdom', capital: 'London', population: 67330000 },
    { country: 'United States', capital: 'Washington, D.C.', population: 331900000 },
    { country: 'Zimbabwe', capital: 'Harare', population: 15990000 },
];
const initialHeaderRowState = {
    column1SortDirection: 'ascending',
    column2SortDirection: 'none',
    column3SortDirection: 'none',
};
/**
 * Given the current sort order, return the next sort order
 */
function getNextSortOrder(sortOrder) {
    return sortOrder === 'ascending' ? 'descending' : 'ascending';
}
function headerRowReducer(state, action) {
    switch (action.column) {
        case 'Country':
            if (state.column1SortDirection === 'ascending') {
                action.payload.sort((a, b) => b.country.localeCompare(a.country));
            }
            else {
                action.payload.sort((a, b) => a.country.localeCompare(b.country));
            }
            return {
                ...initialHeaderRowState,
                column1SortDirection: getNextSortOrder(state.column1SortDirection),
            };
        case 'Capital':
            if (state.column2SortDirection === 'ascending') {
                action.payload.sort((a, b) => b.capital.localeCompare(a.capital));
            }
            else {
                action.payload.sort((a, b) => a.capital.localeCompare(b.capital));
            }
            return {
                ...initialHeaderRowState,
                column2SortDirection: getNextSortOrder(state.column2SortDirection),
            };
        case 'Population':
            if (state.column3SortDirection === 'ascending') {
                action.payload.sort((a, b) => b.population - a.population);
            }
            else {
                action.payload.sort((a, b) => a.population - b.population);
            }
            return {
                ...initialHeaderRowState,
                column3SortDirection: getNextSortOrder(state.column3SortDirection),
            };
        default:
            return initialHeaderRowState;
    }
}
const getSortIcon = (sortOrder) => {
    if (sortOrder === 'ascending') {
        return sortUpIcon;
    }
    else if (sortOrder === 'descending') {
        return sortDownIcon;
    }
    else {
        return undefined;
    }
};
const SortableColumnHeader = createComponent('th')({
    displayName: 'SortableColumnHeader',
    Component: ({ label, sortOrder, onSortAction, children, ...elemProps }, ref) => {
        return (_jsx(Table.Header, { ref: ref, scope: "col", "aria-sort": sortOrder, ...elemProps, children: _jsx(Tooltip, { type: "description", title: `Sort ${getNextSortOrder(sortOrder)}`, children: _jsx(TertiaryButton, { icon: getSortIcon(sortOrder), iconPosition: "end", onClick: () => onSortAction(label), children: children }) }) }));
    },
});
const textStyles = createStyles({
    paddingInlineStart: system.space.x3,
});
export const SortableColumnHeaders = () => {
    const [headerRowState, headerRowDispatch] = React.useReducer(headerRowReducer, initialHeaderRowState);
    function sortColumnHandler(columnName) {
        headerRowDispatch({
            column: columnName,
            payload: countryData,
        });
    }
    return (_jsxs(Table, { maxHeight: "40rem", children: [_jsx(Table.Caption, { children: "Population Listed by Country (2021)" }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(SortableColumnHeader, { label: "Country", sortOrder: headerRowState.column1SortDirection, onSortAction: sortColumnHandler, children: "Country" }), _jsx(SortableColumnHeader, { label: "Capital", sortOrder: headerRowState.column2SortDirection, onSortAction: sortColumnHandler, children: "Capital" }), _jsx(SortableColumnHeader, { label: "Population", sortOrder: headerRowState.column3SortDirection, onSortAction: sortColumnHandler, children: "Population" })] }) }), _jsx(Table.Body, { children: countryData.map(item => {
                    return (_jsxs(Table.Row, { children: [_jsx(Table.Header, { scope: "row", children: _jsx(Text, { cs: textStyles, children: item.country }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.capital }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.population.toLocaleString() }) })] }, item.country));
                }) })] }));
};
