import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import {
  NestedTableDataItem,
  NestedTableNodeState,
} from '../../state/NestedTableState/NestedTableNodeState';
import { Box, TextButton } from '@wix/design-system';
import { ChevronRightSmall } from '@wix/wix-ui-icons-common';
import { Rotate } from '../Rotate';
import { MainCellLayout } from './MainCellLayout';
import type { NestedTableDragAndDrop } from '../NestedTableDragAndDrop/NestedTableDragAndDrop';

export interface NestedTableParentCellProps<
  C extends string,
  T,
  F extends FiltersMap,
> {
  rowNum: number;
  state: NestedTableNodeState<C, T, F>;
  item: NestedTableDataItem<C, T, F>;
  dragAndDrop?: typeof NestedTableDragAndDrop;
}

function _NestedTableParentCell<C extends string, T, F extends FiltersMap>(
  props: NestedTableParentCellProps<C, T, F>,
) {
  const { state: parentState, item, rowNum, dragAndDrop } = props;

  const {
    node: { collection },
  } = parentState;

  const {
    originalKeyedItem,
    state: { nestedTable },
  } = item;

  const renderProps = parentState.renderMainColumn?.(originalKeyedItem.item);

  const [state] = useState(() =>
    item.state.createNode({
      parent: originalKeyedItem,
    }),
  );

  useEffect(() => {
    if (!state) {
      return;
    }
    state._rowNum = rowNum;
  }, [rowNum]);

  const _expanded = state?._expanded;

  return (
    <div
      data-hook="indentation-wrapper"
      {...(process.env.NODE_ENV === 'test' && {
        'data-indentation-width': nestedTable._indentationWidth,
      })}
      style={{
        display: 'flex',
        minWidth: 0,
        paddingInlineStart:
          parentState.childrenDepth * nestedTable._indentationWidth,
      }}
    >
      <MainCellLayout
        dragHandle={
          dragAndDrop?.NestedTableDragHandle && (
            <dragAndDrop.NestedTableDragHandle item={item} />
          )
        }
        expandCollapseButton={
          <Box
            paddingInlineEnd="12px"
            visibility={
              state == null ||
              state._isNotExpandableWhenEmpty ||
              parentState._isExpandableActionDisabled(originalKeyedItem.item)
                ? 'hidden'
                : undefined
            }
            dataHook="expand-collapse-wrapper"
          >
            <TextButton
              size="small"
              dataHook="expand-collapse"
              prefixIcon={
                <Rotate timeout={200} deg={_expanded ? 90 : 0}>
                  <ChevronRightSmall
                    data-hook="chevron-icon"
                    style={{ paddingRight: 0, paddingInlineEnd: 0 }}
                  />
                </Rotate>
              }
            />
          </Box>
        }
        image={renderProps?.image}
        title={
          renderProps?.title ?? collection.itemName(originalKeyedItem.item)
        }
        subtitle={renderProps?.subtitle}
      />
    </div>
  );
}

export const NestedTableParentCell = observer(_NestedTableParentCell);