import AsyncApiComponent from '@asyncapi/react-component';
import styled from 'styled-components';
import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme';

import type { ConfigInterface, AsyncApiProps } from '@asyncapi/react-component';
import type { PageProps } from '@redocly/realm/dist/shared/types';
import type { AsyncApiDocsSettings } from './config';

// @ts-ignore has no exported member error
import { usePageSharedData } from '@portal/hooks';

import '@asyncapi/react-component/styles/default.css';
import { StylesProvider } from './styles';

interface AsyncApiDocsProps {
  pageProps: PageProps & {
    settings?: AsyncApiDocsSettings;
  };
}

function AsyncApiDocs({ pageProps }: AsyncApiDocsProps) {
  const { settings = {} } = pageProps;
  const asyncApiDefinition = usePageSharedData('AsyncApiDefinition') as AsyncApiProps['schema'];

  const { schemaId, hideOperations, hideInfo, hideMessages, hideSchemas, hideServers } = settings;

  const componentConfig: Partial<ConfigInterface> = {
    schemaID: schemaId,
    show: {
      errors: true,
      info: !hideInfo,
      operations: !hideOperations,
      servers: !hideServers,
      messages: !hideMessages,
      schemas: !hideSchemas,
      sidebar: false,
    },
    expand: {
      messageExamples: false,
    },
    sidebar: {
      showServers: 'byDefault',
      showOperations: 'byDefault',
    },
    publishLabel: 'PUBLISHER',
    subscribeLabel: 'SUBSCRIBER',
    sendLabel: 'SEND',
    receiveLabel: 'RECEIVE',
    requestLabel: 'REQUEST',
    replyLabel: 'REPLY',
  };

  return (
    <StylesProvider>
      <Breadcrumbs />
      <AsyncApiComponent schema={asyncApiDefinition} config={componentConfig} />
    </StylesProvider>
  );
}

export default AsyncApiDocs;

const Breadcrumbs = styled(ThemeBreadcrumbs)`
  margin-top: 20px;
`;