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

import type { Version } from '@redocly/config';
import type { SelectProps } from '@redocly/theme/core/types/select';

import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
import { Select } from '@redocly/theme/components/Select/Select';
import { SelectInputWrapper } from '@redocly/theme/components/Select/SelectInput';

export function VersionPicker(props: { versions?: Version[]; onChange: (v: Version) => void }) {
  const themeConfig = useThemeConfig();
  const { versionPicker } = themeConfig;

  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const { versions = [], onChange } = props;
  const options = versions.map(({ label, version, active }) => ({
    element: label || version,
    value: version,
    active: active,
  }));
  const value = options.find((item) => item.active);

  if (versionPicker?.hide) {
    return null;
  }

  const handleOnChange = (value: SelectProps['value']) => {
    const selectedVersion = versions.find((v) => v.version === value);
    onChange(selectedVersion as Version);
  };

  if (!options.length && !versionPicker?.showForUnversioned) return null;

  return (
    <VersionsPickerWrapper data-component-name="VersionPicker/VersionPicker">
      <VersionPickerLabel data-translation-key="versionPicker.label">
        {translate('versionPicker.label', 'Version:')}
      </VersionPickerLabel>
      <VersionPickerSelect
        placeholder={translate('versionPicker.unversioned', 'All versions')}
        disabled={!options.length}
        options={options}
        value={value}
        onChange={handleOnChange}
      />
    </VersionsPickerWrapper>
  );
}

const VersionPickerLabel = styled.label`
  font-size: var(--version-picker-label-font-size);
  font-weight: var(--version-picker-label-font-weight);
`;

export const VersionPickerSelect = styled(Select)<SelectProps>`
  --select-list-item-bg-color-active: var(--version-picker-list-item-bg-color-active);
  --select-list-item-bg-color-hover: var(--version-picker-list-item-bg-color-hover);

  flex: 1;

  font-size: var(--version-picker-font-size);
  font-weight: var(--version-picker-font-weight);
  border-radius: var(--version-picker-border-radius);
  line-height: var(--version-picker-line-height);
  color: var(--version-picker-text-color);

  ${SelectInputWrapper} {
    border: var(--version-picker-input-border);
    border-radius: var(--version-picker-input-border-radius);
    padding: var(--version-picker-input-padding-vertical)
      var(--version-picker-input-padding-horizontal);
  }
`;

const VersionsPickerWrapper = styled.div`
  display: flex;
  gap: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--version-picker-padding-vertical) var(--version-picker-padding-horizontal);
  border-bottom: var(--version-picker-border-bottom);
`;