import { Box, TableListItem, Text } from '@wix/design-system';
import React, { CSSProperties, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { Field } from '@wix/bex-core';
import { FieldActionsPopover } from '../FieldActions';
import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';

export interface CustomFieldItemProps {
  field: Field;
  showDivider?: boolean;
  state: CustomFieldsPanelState;
}

function _CustomFieldItem(props: CustomFieldItemProps) {
  const { field, showDivider, state } = props;

  const style = useMemo<CSSProperties>(
    () => ({
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
    }),
    [],
  );

  const menuConfig = state.fieldActionsMenu({
    fieldId: field.id,
    origin: 'Custom fields panel',
    location: 'Manage custom fields action cell',
  });

  return (
    <div style={style} data-hook={`custom-field-${field.id}`}>
      <TableListItem
        showDivider={showDivider}
        verticalPadding="tiny"
        options={[
          {
            value: (
              <Box>
                <div
                  style={{
                    padding: '0 6px',
                    wordBreak: 'break-word',
                  }}
                >
                  <Text size="small">{field.displayName || field.id}</Text>
                </div>
              </Box>
            ),
          },
          {
            value: (
              <Box height="24px">
                {menuConfig ? <FieldActionsPopover {...menuConfig} /> : null}
              </Box>
            ),
            align: 'right',
          },
        ]}
      />
    </div>
  );
}

export const CustomFieldItem = observer(_CustomFieldItem);