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

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

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

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

  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.label || field.id}</Text>
                </div>
              </Box>
            ),
          },
          {
            value: (
              <Box height="24px">
                <ManageFieldsPopoverMenu
                  origin="Custom fields panel"
                  state={state}
                  id={field.id}
                  location="Manage custom fields action cell"
                />
              </Box>
            ),
            align: 'right',
          },
        ]}
      />
    </div>
  );
}

export const CustomFieldItem = observer(_CustomFieldItem);
