import React, { JSX } from 'react';
import styled from 'styled-components';

import { CatalogMobileTopBarFiltersButton } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton';
import { CatalogMobileTopBarControls } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls';
import { breakpoints } from '@redocly/theme/core';
import { CatalogViewMode } from '@redocly/theme/core';

type CatalogMobileTopBarProps = {
  setMobileFiltersPanelOpen: (open: boolean) => void;
  activeFiltersCount: number;
  setSortOption: (sortOption: string | null) => void;
  sortOption: string | null;
  viewMode: CatalogViewMode;
  setViewMode: (viewMode: CatalogViewMode) => void;
};

export function CatalogMobileTopBar({
  setMobileFiltersPanelOpen,
  activeFiltersCount,
  setSortOption,
  sortOption,
  viewMode,
  setViewMode,
}: CatalogMobileTopBarProps): JSX.Element {
  return (
    <CatalogMobileTopBarWrapper>
      <CatalogMobileTopBarFiltersButton
        setMobileFiltersPanelOpen={setMobileFiltersPanelOpen}
        activeFiltersCount={activeFiltersCount}
      />
      <CatalogMobileTopBarControls
        setSortOption={setSortOption}
        sortOption={sortOption}
        viewMode={viewMode}
        setViewMode={setViewMode}
      />
    </CatalogMobileTopBarWrapper>
  );
}

const CatalogMobileTopBarWrapper = styled.div`
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--catalog-page-padding-horizontal);
  border-bottom: 1px solid var(--border-color-secondary);
  background: var(--bg-color);
  flex-shrink: 0;

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