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

import type { JSX } from 'react';
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 { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
import { HighlightContext } from '@redocly/theme/components/CatalogClassic/CatalogClassicHighlight';
import { CatalogClassicActions } from '@redocly/theme/components/CatalogClassic/CatalogClassicActions';
import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
import { CatalogClassicVirtualizedGroups } from '@redocly/theme/components/CatalogClassic/CatalogClassicVirtualizedGroups';

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

export default function CatalogClassic(props: CatalogClassicProps): JSX.Element {
  const { catalogConfig } = props.pageProps;
  const { useTranslate, useCatalogClassic } = useThemeHooks();

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

  useModalScrollLock(filterPopoverVisible);

  return (
    <HighlightContext.Provider value={[filterTerm]}>
      <CatalogPageWrapper
        data-component-name="CatalogClassic/CatalogClassic"
        withoutFilters={!filters.length}
      >
        {Boolean(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}
          />
        )}
        <CatalogClassicActions
          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}
            {!filters.length && (
              <CatalogSearchWrapper>
                <FilterInput
                  value={filterTerm}
                  onChange={(updatedTerm) => setFilterTerm(updatedTerm)}
                />
              </CatalogSearchWrapper>
            )}
          </CatalogPageDescriptionWrapper>

          <CatalogClassicVirtualizedGroups
            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-classic-page-padding);
  }
`;

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

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

export const CatalogPageWrapper = styled.div<{ withoutFilters?: boolean }>`
  --sidebar-width: var(--catalog-classic-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-classic-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;
`;

const CatalogSearchWrapper = styled.div`
  margin-top: var(--spacing-base);
  max-width: 300px;
`;