import React from 'react';

import type { JSX } from 'react';

import { HorizontalViewIcon } from '@redocly/theme/icons/HorizontalViewIcon/HorizontalViewIcon';
import { VerticalViewIcon } from '@redocly/theme/icons/VerticalViewIcon/VerticalViewIcon';
import { LayoutVariant } from '@redocly/theme/components/SidebarActions/SidebarActions';
import { useThemeHooks } from '@redocly/theme/core/hooks';
import {
  StyledChangeViewButton,
  StyledChangeViewButtonWrap,
} from '@redocly/theme/components/SidebarActions/styled';

export type ChangeViewButtonProps = {
  layout: LayoutVariant;
  collapsedSidebar: boolean;
  onClick: () => void;
};

export const ChangeViewButton = ({
  layout,
  onClick,
  collapsedSidebar,
}: ChangeViewButtonProps): JSX.Element | null => {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();
  const isStacked = layout === LayoutVariant.STACKED;
  const isThreePanel = layout === LayoutVariant.THREE_PANEL;

  return (
    <StyledChangeViewButton onClick={onClick} collapsedSidebar={collapsedSidebar}>
      <StyledChangeViewButtonWrap
        placement={collapsedSidebar ? 'right' : 'top'}
        arrowPosition={collapsedSidebar ? 'center' : 'right'}
        active={isStacked}
        tip={
          isStacked
            ? translate('sidebar.actions.singleColumn', 'Single column')
            : translate('sidebar.actions.changeToSingleColumn', 'Switch to single column')
        }
      >
        <HorizontalViewIcon size="14px" color="--segmented-buttons-content-color" />
      </StyledChangeViewButtonWrap>
      <StyledChangeViewButtonWrap
        active={isThreePanel}
        placement={collapsedSidebar ? 'right' : 'top'}
        arrowPosition={collapsedSidebar ? 'center' : 'right'}
        tip={
          isThreePanel
            ? translate('sidebar.actions.twoColumns', 'Two columns')
            : translate('sidebar.actions.changeToTwoColumns', 'Switch to two columns')
        }
      >
        <VerticalViewIcon size="14px" color="--segmented-buttons-content-color" />
      </StyledChangeViewButtonWrap>
    </StyledChangeViewButton>
  );
};