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';
import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';

export { LayoutVariant };

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

export const SidebarActions = ({
  layout,
  hideCollapseSidebarButton = false,
  collapsedSidebar,
  isApiDocs,
  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 && (
        <Tooltip
          placement={collapsedSidebar ? 'right' : 'top'}
          tip={
            collapsedSidebar
              ? translate('sidebar.actions.show', 'Show sidebar')
              : translate('sidebar.actions.hide', 'Hide sidebar')
          }
        >
          <Button
            onClick={() => {
              onChangeCollapseSidebarClick();
              if (collapsedSidebar) {
                telemetry.sendSidebarItemExpandedMessage();
              } else {
                telemetry.sendSidebarItemCollapsedMessage();
              }
            }}
            size="small"
            variant="outlined"
            aria-label={collapsedSidebar ? 'Show sidebar' : 'Hide sidebar'}
            icon={collapsedSidebar ? <SidePanelOpenIcon /> : <SidePanelCloseIcon />}
          />
        </Tooltip>
      )}
      {isApiDocs && (
        <ControlsWrapChangeLayoutButtons isCollapsed={collapsedSidebar}>
          <ChangeViewButton
            collapsedSidebar={collapsedSidebar}
            layout={layout}
            onClick={() => {
              onChangeViewClick();
              telemetry.sendChangeLayoutButtonClickedMessage();
            }}
          />
        </ControlsWrapChangeLayoutButtons>
      )}
      {!collapsedSidebar && requestAccessButton}
    </ControlsWrap>
  );
};