import { Field } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import React, { useCallback } from 'react';
import { CustomFieldItem } from './CustomFieldItem';
import { Box } from '@wix/design-system';
import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';

export interface CustomFieldsListProps {
  state: CustomFieldsPanelState;
}

function _CustomFieldsList(props: CustomFieldsListProps) {
  const { state } = props;

  const renderItem = useCallback(
    (field: Field, index: number, array: Field[]) => {
      return (
        <CustomFieldItem
          state={state}
          key={field.id}
          field={field}
          showDivider={index < array.length - 1}
        />
      );
    },
    [],
  );

  return (
    <Box
      direction="vertical"
      dataHook="custom-fields-list"
      backgroundColor="D60"
    >
      {state.manageableFields.map(renderItem)}
    </Box>
  );
}

export const CustomFieldsList = observer(_CustomFieldsList);