import React from 'react';
import { LayoutVariant } from '@redocly/config';

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { ChangeViewButton } from '@redocly/theme/components/SidebarActions/ChangeViewButton';
import { Button } from '@redocly/theme/components/Button/Button';
import { SidePanelCloseIcon } from '@redocly/theme/icons/SidePanelCloseIcon/SidePanelCloseIcon';
import { SidePanelOpenIcon } from '@redocly/theme/icons/SidePanelOpenIcon/SidePanelOpenIcon';
import {
  ControlsWrap,
  ControlsWrapChangeLayoutButtons,
} from '@redocly/theme/components/SidebarActions/styled';

export { LayoutVariant };

export type SidebarActionsProps = {
  layout: LayoutVariant;
  collapsedSidebar: boolean;
  isOpenapiDocs: boolean;
  hideCollapseSidebarButton?: boolean;
  onChangeViewClick: () => void;
  onChangeCollapseSidebarClick: () => void;
  requestAccessButton?: React.ReactElement | null;
  className?: string;
};

export const SidebarActions = ({
  layout,
  hideCollapseSidebarButton = false,
  collapsedSidebar,
  isOpenapiDocs,
  onChangeViewClick,
  onChangeCollapseSidebarClick,
  requestAccessButton,
  className,
}: SidebarActionsProps) => {
  const { useTelemetry, useTranslate } = useThemeHooks();
  const { translate } = useTranslate();
  const telemetry = useTelemetry();
  return (
    <ControlsWrap
      className={className}
      isCollapsed={collapsedSidebar}
      data-component-name="Sidebar/SidebarActions"
    >
      {!hideCollapseSidebarButton && (
        <Button
          onClick={() => {
            onChangeCollapseSidebarClick();
            if (collapsedSidebar) {
              telemetry.send?.('sidebar_item_expanded', {});
            } else {
              telemetry.send?.('sidebar_item_collapsed', {});
            }
          }}
          title={
            collapsedSidebar
              ? translate('sidebar.actions.show', 'Show sidebar')
              : translate('sidebar.actions.hide', 'Hide sidebar')
          }
          size="small"
          variant="outlined"
          icon={collapsedSidebar ? <SidePanelOpenIcon /> : <SidePanelCloseIcon />}
        />
      )}
      {isOpenapiDocs && (
        <ControlsWrapChangeLayoutButtons isCollapsed={collapsedSidebar}>
          <ChangeViewButton
            collapsedSidebar={collapsedSidebar}
            layout={layout}
            onClick={() => {
              onChangeViewClick();
              telemetry.send?.('change_layout_button_clicked', {});
            }}
          />
        </ControlsWrapChangeLayoutButtons>
      )}
      {!collapsedSidebar && requestAccessButton}
    </ControlsWrap>
  );
};