import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { Checkbox } from '@workday/canvas-kit-react/checkbox';
import { createComponent, generateUniqueId } from '@workday/canvas-kit-react/common';
import { Table } from '@workday/canvas-kit-react/table';
import { Heading } from '@workday/canvas-kit-react/text';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { createStencil, createStyles } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const selectableRowStencil = createStencil({
    base: {
        gridTemplateColumns: '3.5rem repeat(2, 1fr)',
        transition: 'background-color 200ms',
    },
    modifiers: {
        isSelected: {
            true: {
                backgroundColor: system.color.brand.surface.primary.default,
            },
        },
    },
});
const tableHeaderStyles = createStyles({
    backgroundColor: system.color.surface.alt.default,
});
const tableCellStyles = createStyles({
    backgroundColor: 'transparent',
});
const SelectableRow = createComponent('tr')({
    displayName: 'SelectableRow',
    Component: ({ onSelect, rowData }) => {
        return (_jsxs(Table.Row, { cs: selectableRowStencil({ isSelected: rowData.checked }), children: [_jsx(Table.Cell, { cs: tableCellStyles, children: _jsx(Tooltip, { title: rowData.name, children: _jsx(Checkbox, { checked: rowData.checked, onChange: onSelect }) }) }), _jsx(Table.Header, { cs: tableCellStyles, scope: "row", children: rowData.name }), _jsx(Table.Cell, { cs: tableCellStyles, children: rowData.amount })] }));
    },
});
const pizzaToppingData = [
    { name: 'Pepperoni', amount: '2.5 oz.', checked: false },
    { name: 'Mozzarella', amount: '5 oz.', checked: false },
    { name: 'Basil', amount: '10 Leaves', checked: false },
    { name: 'Roasted Red Peppers', amount: '3 oz.', checked: false },
    { name: 'Mushrooms', amount: '2 oz.', checked: false },
];
const headingID = generateUniqueId();
export const SelectableRows = () => {
    const [selectAllState, setSelectAllState] = React.useState('unchecked');
    const [toppings, setToppings] = React.useState(pizzaToppingData);
    const handleToppingChange = (name) => {
        // Toggle the selected item's checked state and update state
        const updatedToppings = toppings.map(topping => {
            if (topping.name === name) {
                return { ...topping, checked: !topping.checked };
            }
            else {
                return topping;
            }
        });
        setToppings(updatedToppings);
        // Update the Select All checkbox state
        const selectedToppings = updatedToppings.filter(topping => topping.checked === true);
        // If no toppings are selected, set the Select All checkbox to 'unchecked'
        if (selectedToppings.length === 0) {
            setSelectAllState('unchecked');
            // If all toppings are selected, set the Select All checkbox to 'checked'
        }
        else if (selectedToppings.length === updatedToppings.length) {
            setSelectAllState('checked');
            // Otherwise, set the Select All checkbox to 'indeterminate'
        }
        else {
            setSelectAllState('indeterminate');
        }
    };
    const handleSelectAll = () => {
        // If the Select All checkbox is in a checked or indeterminate state,
        // update it to 'unchecked', and uncheck all topping checkboxes
        if (selectAllState === 'checked' || selectAllState === 'indeterminate') {
            setSelectAllState('unchecked');
            const updatedToppingData = toppings.map(topping => ({ ...topping, checked: false }));
            setToppings(updatedToppingData);
        }
        // If the Select All checkbox is in an unchecked state,
        // update it to 'checked', and check all topping checkboxes
        if (selectAllState === 'unchecked') {
            setSelectAllState('checked');
            const updatedToppingData = toppings.map(topping => ({ ...topping, checked: true }));
            setToppings(updatedToppingData);
        }
    };
    return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", id: headingID, size: "small", children: "Select your pizza toppings" }), _jsxs(Table, { "aria-labelledby": headingID, children: [_jsxs(Table.Row, { gridTemplateColumns: "3.5rem repeat(2, 1fr)", children: [_jsx(Table.Cell, { cs: tableHeaderStyles, children: _jsx(Tooltip, { title: "Select All", children: _jsx(Checkbox, { checked: selectAllState === 'checked', indeterminate: selectAllState === 'indeterminate', onChange: handleSelectAll }) }) }), _jsx(Table.Header, { scope: "col", cs: tableHeaderStyles, children: "Toppings" }), _jsx(Table.Header, { scope: "col", cs: tableHeaderStyles, children: "Amount" })] }), _jsx(Table.Body, { children: toppings.map(rowData => (_jsx(SelectableRow, { rowData: rowData, onSelect: () => handleToppingChange(rowData.name) }, rowData.name))) })] })] }));
};
