import { observer } from 'mobx-react-lite';
import React, { forwardRef, HTMLAttributes, MutableRefObject } from 'react';
import { classes, st } from './NestedTablePlaceholderStatesRow.st.css.js';
import { FiltersMap } from '@wix/bex-core';
import { Box, Table } from '@wix/design-system';
import { NestedTableRowPlaceholderStates } from './NestedTableRowPlaceholderStates';
import { NestedTableSkeletonItem } from '../../state/NestedTableState/NestedTableNodeState';

export interface NestedTablePlaceholderStatesRowProps<
  C extends string,
  T,
  F extends FiltersMap,
> extends HTMLAttributes<HTMLTableRowElement> {
  item: NestedTableSkeletonItem<C, T, F>;
}

const _NestedTablePlaceholderStatesRow = forwardRef(
  <C extends string, T, F extends FiltersMap>(
    props: NestedTablePlaceholderStatesRowProps<C, T, F> & { rowData: unknown },
    ref:
      | ((instance: HTMLTableRowElement | null) => void)
      | MutableRefObject<HTMLTableRowElement | null>
      | null,
  ) => {
    const { children, item, className, rowData, ...rest } = props;

    const { st: dataTableRowSt, classes: dataTableRowClasses } =
      Table.dataTableRowStyle;

    return (
      <tr
        ref={ref}
        className={st(
          classes.root,
          {},
          dataTableRowSt(
            dataTableRowClasses.root,
            {
              skin: 'light',
            },
            className,
          ),
        )}
        {...rest}
      >
        <td>
          <Box verticalAlign="middle" align="center" width="100%">
            <NestedTableRowPlaceholderStates state={item.state} />
          </Box>
        </td>
      </tr>
    );
  },
);

export const NestedTablePlaceholderStatesRow = observer(
  _NestedTablePlaceholderStatesRow,
);