import { Box } from '@wix/design-system';
import React, { ReactNode } from 'react';
import { st, classes } from './LoadingRow.st.css.js';
import { LoadingRowState } from './LoadingRowState';
import { AILoadingLottiePoster } from './AILoadingLottiePoster';
import { observer } from 'mobx-react-lite';

interface LoadingRowTDProps {
  state: LoadingRowState;
  replacedCell: {
    props: {
      children: ReactNode;
    };
  };
}
function _LoadingRowTD({ state, replacedCell }: LoadingRowTDProps) {
  return (
    <td {...replacedCell.props} style={{ position: 'initial' }}>
      {replacedCell.props.children}
      <div
        style={{
          width: '100%',
          left: 0,
          top: 0,
          right: 0,
          zIndex: 2,
          position: 'absolute',
          height: '100%',
        }}
      >
        <Box
          align="center"
          verticalAlign="middle"
          width="100%"
          height="calc(100% - 1px)"
          borderBottom="1px solid #DFE5EB"
          dataHook="table-loading-row"
          className={st(classes.root)}
        >
          {state.LottieRenderer && state.animationData ? (
            <Box dataHook="loading-row-lottie">
              <state.LottieRenderer
                style={{ width: '20px', height: '20px' }}
                animationData={state.animationData}
              />
            </Box>
          ) : (
            <AILoadingLottiePoster />
          )}
        </Box>
      </div>
    </td>
  );
}

export const LoadingRowTD = observer(_LoadingRowTD);