import { Grid } from '../grid.spec';
import { GridContainer } from '../grid-container.spec';
import { GridContent } from '../grid-content.spec';
import { GridTable } from '../grid-table.spec';
import { GridPager } from '../grid-pager.spec';
import { GridStackRow } from '../grid-stack-row.spec';
import { Button } from '../../button/button.spec';
import { CheckboxNormal } from '../../checkbox/templates/checkbox-normal';
import { Icon } from '../../icon/icon.spec';
import { TableTbody, TableRow, TableTd } from '../../table';
import GridStackCell from '../grid-stack-cell.spec';

export const GridStack = ({ reorderable, checkbox, aggregates, sticky, detailRow, cols, ...other }: any) => (
    <Grid _renderAriaRoot className="k-grid-stack"
        pager={ <GridPager type="input" pageTitleInfo={false} refresh={false} info={false} pagerSizeInfo={false} pageSizes={false} /> }
        children={(
            <>
                <GridContainer>
                    <GridContent>
                        <GridTable role="none">
                            <colgroup>
                                <col />
                            </colgroup>
                            <TableTbody role="rowgroup">
                                <TableRow className="k-master-row" role="row">
                                    <TableTd className={`${sticky ? 'k-grid-row-sticky' : ''}`} role="gridcell" tabIndex={0}>
                                        <GridStackRow cols={cols}>
                                            {reorderable && (
                                                <GridStackCell cellContent={<><Icon icon="reorder" /><span>Reorder</span></>} className="k-drag-cell" />
                                            )}
                                            {sticky && (
                                                <GridStackCell cellContent={<Button icon="unpin" text="Unpin" fillMode="flat" themeColor="primary" />} />
                                            )}
                                            {checkbox && (
                                                <GridStackCell cellContent={<CheckboxNormal />} />
                                            )}
                                            <GridStackCell cellHeader="Contact Name" cellContent="Maria Anders" tabIndex={0} />
                                            <GridStackCell cellHeader="Company Name" cellContent="Alfreds Futterkiste" tabIndex={0} />
                                            <GridStackCell cellHeader="Country" cellContent="Germany" tabIndex={0} />
                                            {detailRow && (
                                                 <GridStackCell cellContent={<Button icon="minus" text="Collapse Details" fillMode="flat" themeColor="primary" />} />
                                            )}
                                        </GridStackRow>
                                    </TableTd>
                                </TableRow>
                                {detailRow && (
                                    <TableRow className="k-detail-row" role="row">
                                        <TableTd className="k-detail-cell" role="gridcell">
                                            {/* Custom Detail Row Template */}
                                            <div>
                                                <span className="k-font-bold">In stock: </span>
                                                <span>39</span>
                                            </div>
                                            <div>
                                                <span className="k-font-bold">On order: </span>
                                                <span>0</span>
                                            </div>
                                        </TableTd>
                                    </TableRow>
                                )}
                                <TableRow alt className="k-master-row" role="row">
                                    <TableTd role="gridcell" tabIndex={0}>
                                        <GridStackRow cols={cols}>
                                            {reorderable && (
                                                <GridStackCell cellContent={<><Icon icon="reorder" /><span>Reorder</span></>} className="k-drag-cell" />
                                            )}
                                            {sticky && (
                                                <GridStackCell cellContent={<Button icon="pin" text="Pin" fillMode="flat" themeColor="primary" />} />
                                            )}
                                            {checkbox && (
                                                <GridStackCell cellContent={<CheckboxNormal />} />
                                            )}
                                            <GridStackCell cellHeader="Contact Name" cellContent="Ana Trujillo" tabIndex={0} />
                                            <GridStackCell cellHeader="Company Name" cellContent="Ana Trujillo Emparedados y helados" tabIndex={0} />
                                            <GridStackCell cellHeader="Country" cellContent="Mexico" tabIndex={0} />
                                            {detailRow && (
                                                <GridStackCell cellContent={<Button icon="plus" text="Expand Details" fillMode="flat" themeColor="primary" />} />
                                            )}
                                        </GridStackRow>
                                    </TableTd>
                                </TableRow>
                            </TableTbody>
                        </GridTable>
                    </GridContent>
                </GridContainer>
            </>
        )}
        gridSelectionAggregates={(
            aggregates && (
                <div className="k-selection-aggregates k-grid-selection-aggregates" aria-live="polite">
                    <div className="k-selection-aggregates-item">
                        <span className="k-selection-aggregates-item-text">Sum:</span>
                        <span className="k-selection-aggregates-item-value">122.00</span>
                    </div>
                    <div className="k-selection-aggregates-item">
                        <span className="k-selection-aggregates-item-text">Avg:</span>
                        <span className="k-selection-aggregates-item-value">30.50</span>
                    </div>
                </div>
            )
        )}
        {...other}>
    </Grid>
);