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

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

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"
      role="region"
      aria-label={translate('versionPicker.label', 'Version selector')}
    >
      <VersionPickerLabel
        data-translation-key="versionPicker.label"
        htmlFor="version-picker-select"
      >
        {translate('versionPicker.label', 'Version:')}
      </VersionPickerLabel>
      <VersionPickerSelect
        placeholder={translate('versionPicker.unversioned', 'All versions')}
        disabled={!options.length}
        options={options}
        value={value}
        onChange={handleOnChange}
        dataAttributes={{
          id: 'version-picker-select',
          'aria-describedby': 'version-picker-description',
          'aria-label': translate('versionPicker.label', 'Select version'),
        }}
      />
      <SrOnly id="version-picker-description">
        {/* eslint-disable-next-line theme/require-translate */}
        This is version picker select, using it you can select a version of the API.
      </SrOnly>
    </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);

    &:focus-within {
      outline: 1px solid var(--version-picker-focus-outline-color);
    }
  }
`;

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

  &:focus-visible {
    outline: 1px solid var(--version-picker-focus-outline-color);
  }
`;

const SrOnly = styled.span`
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
`;