import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { Checkbox } from '@workday/canvas-kit-react/checkbox';
import { useUniqueId } from '@workday/canvas-kit-react/common';
import { Table } from '@workday/canvas-kit-react/table';
import { TextInput } from '@workday/canvas-kit-react/text-input';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { createStyles } from '@workday/canvas-kit-styling';
import { trashIcon } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
const rowStyles = createStyles({
    gridTemplateColumns: '24rem 12rem 7rem 7rem',
});
const centerStyles = createStyles({
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
});
const currencyInputContainer = createStyles({
    position: 'relative',
    display: 'inline-block',
});
const dollarPrefix = createStyles({
    position: 'absolute',
    left: system.gap.sm,
    top: '50%',
    transform: 'translateY(-50%)',
    color: system.color.fg.default,
    pointerEvents: 'none',
    zIndex: 1,
    ...system.type.subtext.lg,
});
const currencyInput = createStyles({
    paddingInlineStart: system.padding.md, // Make room for dollar sign
});
const expensesData = [
    'Rent',
    'Groceries',
    'Electricity bill',
    'Internet service',
    'Gasoline',
    'Cell phone bill',
    'Health insurance',
    'Car payment',
    'Student loan payment',
    'Dining out',
];
const LineItem = ({ itemName, labelIds }) => {
    const [name, setName] = React.useState(itemName);
    const [amount, setAmount] = React.useState('');
    function handleNameChange(e) {
        setName(e.target.value);
    }
    function handleAmountChange(e) {
        const value = e.target.value;
        // For type="number", the browser handles most validation
        // We just need to limit decimal places to 2 for currency
        if (value.includes('.')) {
            const parts = value.split('.');
            if (parts[1] && parts[1].length > 2) {
                // Limit to 2 decimal places
                const limitedValue = parts[0] + '.' + parts[1].substring(0, 2);
                setAmount(limitedValue);
                return;
            }
        }
        setAmount(value);
    }
    return (_jsxs(Table.Row, { cs: rowStyles, children: [_jsx(Table.Header, { scope: "row", children: _jsx(TextInput, { onChange: handleNameChange, value: name, "aria-labelledby": labelIds.name }) }), _jsx(Table.Cell, { children: _jsxs("div", { className: currencyInputContainer, children: [_jsx("span", { className: dollarPrefix, "aria-hidden": "true", children: "$" }), _jsx(TextInput, { type: "number", value: amount, onChange: handleAmountChange, placeholder: "0.00", min: "0", step: "0.01", width: "10.5rem", "aria-labelledby": labelIds.amount, cs: currencyInput })] }) }), _jsx(Table.Cell, { cs: centerStyles, children: _jsx(Checkbox, { "aria-labelledby": labelIds.recon }) }), _jsx(Table.Cell, { cs: centerStyles, children: _jsx(Tooltip, { title: "Delete", children: _jsx(TertiaryButton, { icon: trashIcon }) }) })] }));
};
export const WithFormFields = () => {
    const colHeadIds = {
        name: useUniqueId(),
        amount: useUniqueId(),
        recon: useUniqueId(),
    };
    return (_jsxs(Table, { children: [_jsx(Table.Caption, { children: "Budget Planning Tool" }), _jsx(Table.Head, { children: _jsxs(Table.Row, { cs: rowStyles, children: [_jsxs(Table.Header, { scope: "col", id: colHeadIds.name, children: ["Expense Name", ' '] }), _jsxs(Table.Header, { scope: "col", id: colHeadIds.amount, children: ["Budgeted Amount (USD)", ' '] }), _jsx(Table.Header, { scope: "col", id: colHeadIds.recon, cs: centerStyles, children: "Reconciled" }), _jsxs(Table.Header, { scope: "col", cs: centerStyles, children: ["Actions", ' '] })] }) }), _jsx(Table.Body, { children: expensesData.map(i => (_jsx(LineItem, { itemName: i, labelIds: colHeadIds }))) })] }));
};
