import React from 'react';
import { observer } from 'mobx-react-lite';
import { InlineSkeletonContent } from './Skeletons';
import { CustomFieldsViewWidgetContent } from './CustomFieldsViewWidgetContent';
import {
  CustomFieldsViewWidgetState,
  ExtendedFields,
  WixPatternsContainer,
} from '@wix/bex-core';
import { EmptyStateViewContent } from './EmptyStateViewContent';
import { ErrorStateContent } from './ErrorStateContent';

interface CustomFieldsViewWidgetInlineProps {
  dataHook?: string;
  state: CustomFieldsViewWidgetState;
  container: WixPatternsContainer;
  areAllCustomFieldsEmpty: boolean;
  extendedFields?: ExtendedFields;
  userFieldsTitle?: string;
}

const _CustomFieldsViewWidgetInline = ({
  dataHook,
  state,
  container,
  areAllCustomFieldsEmpty,
  extendedFields,
  userFieldsTitle,
}: CustomFieldsViewWidgetInlineProps) => {
  const { translate: t } = container;

  const getContentElement = () => {
    switch (true) {
      case state.isLoading: {
        return <InlineSkeletonContent />;
      }
      case state.isError:
        return <ErrorStateContent state={state} />;
      case areAllCustomFieldsEmpty:
        return (
          <EmptyStateViewContent
            title={t('cairo.customFields.entityPage.emptyState.title')}
            subtitle={t('cairo.customFields.entityPage.emptyState.subtitle')}
          />
        );

      default:
        return (
          <CustomFieldsViewWidgetContent
            state={state}
            extendedFields={extendedFields}
            userFieldsTitle={userFieldsTitle}
          />
        );
    }
  };

  return <div data-hook={dataHook}>{getContentElement()}</div>;
};

export const CustomFieldsViewWidgetInline = observer(
  _CustomFieldsViewWidgetInline,
);