import { Stack } from '@servicetitan/design-system';
import { provide, useDependencies } from '@servicetitan/react-ioc';
import { observer } from 'mobx-react';
import { FC } from 'react';

import { Table, TableColumn, TableDetailRowProps, useRowExpandColumn } from '../..';

import { Product } from '../overview/product';
import { RowDetailsTableStore } from './row-details-table.store';

const DetailsRow: FC<TableDetailRowProps> = ({ dataItem }) => {
    const product = dataItem as Product;

    return (
        <Stack>
            <div style={{ width: '38px' }} />
            <Stack.Item className="m-l-1" fill>
                details for product {product.ProductName}
            </Stack.Item>
        </Stack>
    );
};

export const TableDetailedRowExample: FC = provide({
    singletons: [RowDetailsTableStore],
})(
    observer(() => {
        const [{ tableState }] = useDependencies(RowDetailsTableStore);
        const expandColumn = useRowExpandColumn();

        return (
            <Table tableState={tableState} striped={false} sortable={false} detail={DetailsRow}>
                {expandColumn}
                <TableColumn field="ProductID" title="ID" width="50px" />

                <TableColumn field="ProductName" title="Product Name" />

                <TableColumn field="MadeIn" title="Made In" width="175px" />

                <TableColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="125px" />
            </Table>
        );
    })
);