import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { generateUniqueId } from '@workday/canvas-kit-react/common';
import { Table } from '@workday/canvas-kit-react/table';
import { Heading, Subtext } from '@workday/canvas-kit-react/text';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { createStyles } from '@workday/canvas-kit-styling';
import { chevronDownSmallIcon, chevronRightSmallIcon } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
const headingID = generateUniqueId();
const autoData = [
    {
        id: generateUniqueId(),
        brand: 'Porsche',
        model: '992 911 GT3',
        year: '2022',
        price: 'Starts at $160,000',
        engine: '4.0L Flat 6',
        transmission: 'PDK or 7-Speed Manual',
        horsepower: '502hp',
        torque: '346 lb-ft',
        curbWeight: '3,164 lbs',
        orderStatus: 'Order Placed',
    },
    {
        id: generateUniqueId(),
        brand: 'BMW',
        model: 'M5 Competition',
        year: '2018',
        price: 'Starts at $105,000',
        engine: 'Twin-Turbo 4.4L V8',
        transmission: 'Automatic',
        horsepower: '627hp',
        torque: '553 lb-ft',
        curbWeight: '4,345 lbs',
        orderStatus: 'Order Fulfilled',
    },
    {
        id: generateUniqueId(),
        brand: 'Audi',
        model: 'R8',
        year: '2022',
        price: 'Starts at $148,000',
        engine: '5.2L V10',
        transmission: 'Automatic',
        horsepower: '562hp',
        torque: '408 lb-ft',
        curbWeight: '3,594 lbs',
        orderStatus: 'Order Fulfilled',
    },
    {
        id: generateUniqueId(),
        brand: 'Lotus',
        model: 'Emira',
        year: '2023',
        price: 'Starts at $78,000',
        engine: 'Supercharged 3.5L V6',
        transmission: 'Automatic or 6-Speed Manual',
        horsepower: '400hp',
        torque: '317 lb-ft',
        curbWeight: '3520 lbs',
        orderStatus: 'Shipped: In Transit',
    },
    {
        id: generateUniqueId(),
        brand: 'Toyota',
        model: 'Supra',
        year: '1998',
        price: '$40,000 - $80,000',
        engine: '3.0L Inline 6',
        transmission: 'Automatic or 6-Speed Manual',
        horsepower: '320hp',
        torque: '315 lb-ft',
        curbWeight: '3,599 lbs',
        orderStatus: 'Delivered',
    },
    {
        id: generateUniqueId(),
        brand: 'Nissan',
        model: 'Skyline GT-R',
        year: '1994',
        price: '$45,000 - $90,000',
        engine: '2.6L Twin-Turbo Inline 6',
        transmission: '5-Speed Manual',
        horsepower: '276hp',
        torque: '260 lb-ft',
        curbWeight: '3,153 lbs',
        orderStatus: 'Delivered',
    },
];
const expandableSectionStyles = createStyles({
    alignItems: 'flex-start',
    display: 'flex',
    gap: system.gap.md,
    padding: system.padding.xxl,
});
const expandableHeadingStyles = createStyles({
    margin: 0,
    fontWeight: system.fontWeight.bold,
});
const expandableListStyles = createStyles({
    listStyle: 'none',
    margin: 0,
    padding: 0,
    gap: system.gap.sm,
});
function ExpandableRow({ data }) {
    const [rowExpanded, setRowExpanded] = React.useState(false);
    return (_jsxs(_Fragment, { children: [_jsxs(Table.Row, { cs: { gridTemplateColumns: '4rem repeat(4, 1fr)' }, children: [_jsx(Table.Cell, { children: _jsx(Tooltip, { title: `${data.brand} ${data.model}`, children: _jsx(TertiaryButton, { size: "small", icon: rowExpanded ? chevronDownSmallIcon : chevronRightSmallIcon, "aria-expanded": rowExpanded, onClick: () => setRowExpanded(!rowExpanded) }) }) }), _jsx(Table.Header, { scope: "row", children: data.brand }), _jsx(Table.Cell, { children: data.model }), _jsx(Table.Cell, { children: data.year }), _jsx(Table.Cell, { children: data.price })] }), rowExpanded && (_jsx(Table.Row, { children: _jsxs(Table.Cell, { colSpan: 5, cs: expandableSectionStyles, children: [_jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Status" }), _jsx(StatusIndicator, { variant: "blue", children: data.orderStatus })] }), _jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Specifications" }), _jsxs("ul", { className: expandableListStyles, children: [_jsxs(Subtext, { as: "li", size: "large", children: ["Engine: ", data.engine] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Transmission: ", data.transmission] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Horsepower: ", data.horsepower] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Torque: ", data.torque] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Curb Weight: ", data.curbWeight] })] })] })] }) }))] }));
}
export const ExpandableRows = () => {
    return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", id: headingID, size: "small", children: "Showroom Inventory" }), _jsxs(Table, { "aria-labelledby": headingID, children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { cs: { gridTemplateColumns: '4rem repeat(4, 1fr)' }, children: [_jsx(Table.Cell, {}), _jsx(Table.Header, { scope: "col", children: "Make" }), _jsx(Table.Header, { scope: "col", children: "Model" }), _jsx(Table.Header, { scope: "col", children: "Year" }), _jsx(Table.Header, { scope: "col", children: "Price" })] }) }), _jsx(Table.Body, { children: autoData.map(item => (_jsx(ExpandableRow, { data: item }, item.id))) })] })] }));
};
