import React from 'react';
import styled from 'styled-components';

import type { CatalogConfig } from '@redocly/theme/config';

import { breakpoints } from '@redocly/theme/core/utils';
import { useThemeHooks, useModalScrollLock } from '@redocly/theme/core/hooks';
import { H2 } from '@redocly/theme/components/Typography/H2';
import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
import { CatalogActions } from '@redocly/theme/components/Catalog/CatalogActions';
import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
import { CatalogVirtualizedGroups } from '@redocly/theme/components/Catalog/CatalogVirtualizedGroups';

export type CatalogProps = {
  pageProps: {
    catalogId: string;
    catalogConfig: CatalogConfig;
  };
};

export default function Catalog(props: CatalogProps): JSX.Element {
  const { catalogConfig } = props.pageProps;
  const { useTranslate, useCatalog } = useThemeHooks();

  const { filterTerm, setFilterTerm, groups, filters } = useCatalog(catalogConfig);
  const [filterPopoverVisible, setFilterPopoverVisible] = React.useState(false);
  const { translate } = useTranslate();

  useModalScrollLock(filterPopoverVisible);

  return (
    <HighlightContext.Provider value={[filterTerm]}>
      <CatalogPageWrapper data-component-name="Catalog/Catalog" withoutFilters={!filters.length}>
        <FiltersSidebar
          menu={
            <FilterContent
              setFilterTerm={setFilterTerm}
              filters={filters}
              filterTerm={filterTerm}
              filterValuesCasing={catalogConfig.filterValuesCasing}
            />
          }
        />
        {filterPopoverVisible && (
          <FilterPopover
            onClose={() => setFilterPopoverVisible(false)}
            setFilterTerm={setFilterTerm}
            filterTerm={filterTerm}
            filters={filters}
            filterValuesCasing={catalogConfig.filterValuesCasing}
          />
        )}
        <CatalogActions
          onOpenFilter={() => setFilterPopoverVisible(true)}
          filters={filters}
          filterTerm={filterTerm}
        />
        <CatalogPageContent>
          <CatalogPageDescriptionWrapper>
            {catalogConfig.title ? (
              <CatalogTitle data-translation-key={catalogConfig.titleTranslationKey}>
                {' '}
                {translate(catalogConfig.titleTranslationKey, catalogConfig.title)}{' '}
              </CatalogTitle>
            ) : null}
            {catalogConfig.description ? (
              <CatalogDescription data-translation-key={catalogConfig.descriptionTranslationKey}>
                {' '}
                {translate(catalogConfig.descriptionTranslationKey, catalogConfig.description)}{' '}
              </CatalogDescription>
            ) : null}
          </CatalogPageDescriptionWrapper>

          <CatalogVirtualizedGroups groups={groups} filters={filters} filterTerm={filterTerm} />
        </CatalogPageContent>
      </CatalogPageWrapper>
    </HighlightContext.Provider>
  );
}

export const CatalogPageContent = styled.main`
  flex: 1;
  width: 90%;
  margin: 0 auto;

  @media screen and (min-width: ${breakpoints.medium}) {
    width: 100%;
    padding: var(--catalog-page-padding);
  }
`;

export const CatalogTitle = styled(H2)`
  color: var(--catalog-title-text-color);
  font-weight: var(--catalog-title-font-weight);
  font-size: var(--catalog-title-font-size);
  margin: var(--catalog-title-margin);
`;

export const CatalogDescription = styled.p`
  color: var(--catalog-description-text-color);
  font-weight: var(--catalog-description-font-weight);
  font-size: var(--catalog-description-font-size);
  margin: var(--catalog-description-margin);
`;

export const CatalogPageWrapper = styled.div<{ withoutFilters?: boolean }>`
  --sidebar-width: var(--catalog-sidebar-width, 285px);

  display: flex;
  flex-direction: column;

  font-weight: var(--font-weight-regular);

  color: var(--text-color-secondary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);

  hr {
    border: 0;
    width: calc(100% + 48px);
    margin: auto -24px 0 -24px;
    border-top: 1px solid var(--border-color-primary);
  }
  a:not([role='button']) {
    text-decoration: none;
    color: var(--link-color-primary);
    font-weight: var(--link-font-weight);
  }

  padding: ${({ withoutFilters }) => (withoutFilters ? 'var(--spacing-base) 0 0 0' : '0')};

  @media screen and (min-width: ${breakpoints.medium}) {
    flex-direction: row;
    padding: 0;
  }
`;

export const CatalogPageDescriptionWrapper = styled.div`
  margin: var(--catalog-heading-margin);
  display: none;

  @media screen and (min-width: ${breakpoints.medium}) {
    display: block;
  }
`;

const FiltersSidebar = styled(Sidebar)`
  display: none;

  @media screen and (min-width: ${breakpoints.medium}) {
    display: flex;
  }
  --menu-container-padding-top: 0;
`;