import React 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 {
  StyledChangeViewButton,
  StyledChangeViewButtonWrap,
} from '@redocly/theme/components/SidebarActions/styled';
import { useThemeHooks } from '@redocly/theme/core/hooks';

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();

  return (
    <StyledChangeViewButton
      title={translate('sidebar.actions.changeLayout', 'Change layout')}
      onClick={onClick}
      collapsedSidebar={collapsedSidebar}
    >
      <StyledChangeViewButtonWrap active={layout === LayoutVariant.STACKED}>
        <HorizontalViewIcon size="14px" color="--segmented-buttons-content-color" />
      </StyledChangeViewButtonWrap>
      <StyledChangeViewButtonWrap active={layout === LayoutVariant.THREE_PANEL}>
        <VerticalViewIcon size="14px" color="--segmented-buttons-content-color" />
      </StyledChangeViewButtonWrap>
    </StyledChangeViewButton>
  );
};