import React from 'react';
import styled from 'styled-components';

import type { JSX } from 'react';
import type { ColorMode } from '@redocly/theme/core/types';

import { ContrastIcon } from '@redocly/theme/icons/ContrastIcon/ContrastIcon';
import { MoonIcon } from '@redocly/theme/icons/MoonIcon/MoonIcon';
import { SunIcon } from '@redocly/theme/icons/SunIcon/SunIcon';
import { DEFAULT_COLOR_MODES } from '@redocly/theme/core/constants';

export type ColorModeIconProps = {
  mode?: ColorMode | string;
  className?: string;
};

export function ColorModeIcon(props: ColorModeIconProps): JSX.Element {
  return (
    <ColorModeIconComponent {...props} data-component-name="ColorModeSwitcher/ColorModeIcon" />
  );
}

function Icon({ mode, className }: ColorModeIconProps) {
  switch (mode) {
    case DEFAULT_COLOR_MODES.DARK:
      return <SunIcon data-testid="dark" />;
    case DEFAULT_COLOR_MODES.LIGHT:
      return <MoonIcon data-testid="light" />;
    default:
      return <ContrastIcon data-testid="custom" className={className + (mode ? ' ' + mode : '')} />;
  }
}

const ColorModeIconComponent = styled(Icon)`
  box-sizing: border-box;
`;