"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.ItemOptions = void 0; const tslib_1 = require("tslib"); const ink_1 = require("ink"); const react_1 = tslib_1.__importDefault(require("react")); const useListInput_1 = require("../hooks/useListInput"); const Gem_1 = require("./Gem"); const Pad_1 = require("./Pad"); const ItemOptions = function ({ active, skewer, options, value, onChange, sizes = [], }) { // Our possible values are those that have been provided with a label so that // the user can see what they're selecting. const values = options.filter(({ label }) => !!label).map(({ value }) => value); const selectedIndex = options.findIndex(o => { return o.value === value && o.label != ``; }); (0, useListInput_1.useListInput)(value, values, { active, minus: `left`, plus: `right`, set: onChange, }); return react_1.default.createElement(react_1.default.Fragment, null, options.map(({ label }, index) => { const isGemActive = index === selectedIndex; const boxWidth = sizes[index] - 1 || 0; const simpleLabel = label // https://stackoverflow.com/a/29497680 // eslint-disable-next-line no-control-regex .replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, ``); const padWidth = Math.max(0, boxWidth - (simpleLabel).length - 2); if (!label) { return (react_1.default.createElement(ink_1.Box, { key: `spacer-${index}`, width: boxWidth, marginLeft: 1 })); } return (react_1.default.createElement(ink_1.Box, { key: label, width: boxWidth, marginLeft: 1 }, react_1.default.createElement(ink_1.Text, { wrap: `truncate` }, react_1.default.createElement(Gem_1.Gem, { active: isGemActive }), ` `, label), skewer ? react_1.default.createElement(Pad_1.Pad, { active: active, length: padWidth }) : null)); })); }; exports.ItemOptions = ItemOptions;