import React from 'react';
import { Avatar, TableListItem, Text, } from '@wix/design-system';
import { ChevronRightLarge } from '@wix/wix-ui-icons-common';
import { st, classes } from './PickerTableListItem.st.css.js';
export function PickerTableListItem(props) {
    const { dataHook, showDivider, keyedItem, state, primaryAction, primaryActionWidth = 'auto', title, subtitle, extraNode, disabled, checkbox, multiple, options: optionsProp = [], ...tableListItemProps } = props;
    const { collection } = state;
    const name = collection.itemName(keyedItem.item);
    const { start, end } = optionsProp.reduce((prev, current) => {
        const column = {
            value: undefined,
            ...current,
        };
        if (current.end) {
            prev.end.push(column);
        }
        else {
            prev.start.push(column);
        }
        return prev;
    }, {
        start: [],
        end: [],
    });
    if (!start.length) {
        start.push({
            align: 'left',
            width: '84px',
            value: React.createElement(Avatar, { size: "size60", name: name }),
        }, {
            align: 'left',
            value: React.createElement(Text, { dataHook: "selector-title" }, name),
        });
    }
    const options = [
        ...start,
        {
            width: primaryActionWidth,
            value: primaryAction || React.createElement(ChevronRightLarge, null),
            align: 'right',
        },
        ...end,
    ];
    return (React.createElement(TableListItem, { className: st(classes.root), verticalPadding: "medium", dataHook: dataHook, ...tableListItemProps, options: options }));
}
//# sourceMappingURL=PickerTableListItem.js.map