import { IOption } from '@rh-support/types';
import { toOption, toOptions } from '@rh-support/utils';
import isEmpty from 'lodash/isEmpty';
import React, { useEffect, useState } from 'react';
import { IProduct, IVersion } from 'reducers/AppMetadataReducer';
import { Dropdown } from '../shared/input/DropdownList';
interface IProps {
  products: IProduct[];
  selectedProduct: IProduct;
  onProductChange: (product: IProduct) => any;
  onVersionChange: (version: IVersion) => any;
  disabled: boolean;
  htmlForId: string;
}

export function ProductVersionDropdownSelector(props: IProps) {
  const [isProductInValid, setIsProductInValid] = useState(false);
  const [isVersionInValid, setIsVersionInValid] = useState(false);
  const onProductChange = (option: IOption<IProduct>) => {
    props.onProductChange(option.value);
    validateProduct(option);
  };
  const onVersionChange = (option: IOption<IVersion>) => {
    props.onVersionChange(option.value);
    validateVersion(option);
  };
  const onProductClear = () => {
    const defaultSelectedProduct = {
      featuredVersion: '',
      product_name: '',
      versions: [],
      selectedVersion: ''
    };
    props.onProductChange(defaultSelectedProduct);
    validateProduct(toOption<IProduct>(defaultSelectedProduct, 'product_name'));
  };
  const validateProduct = (selectedItem: IOption<IProduct>): void => {
    setIsProductInValid(!props.disabled && (isEmpty(selectedItem) || isEmpty(selectedItem.label)));
  };
  const validateVersion = (selectedItem: IOption<IVersion>): void => {
    setIsVersionInValid(!props.disabled && (isEmpty(selectedItem) || isEmpty(selectedItem.label)));
  };
  useEffect(() => {
    if (props.disabled) {
      setIsProductInValid(false);
      setIsVersionInValid(false);
    }
  }, [props.disabled]);
  return (
    <>
      <label htmlFor={props.htmlForId}>
        <Dropdown<IProduct>
            className={`product-dropdown`}
            placeholder="Select another product"
            list={props.products ? toOptions<IProduct>(props.products, 'product_name') : []}
            title={`Product dropdown`}
            selectedItem={toOption<IProduct>(props.selectedProduct, 'product_name')}
            isInValid={!props.disabled && isProductInValid}
            onChange={onProductChange}
            onOuterClick={validateProduct}
            searchable={true}
            onClearSelection={onProductClear}
        />
      </label>

      <Dropdown<IVersion>
        selectedItem={toOption<IVersion>(props.selectedProduct && (props.selectedProduct.selectedVersion))}
        list={props.selectedProduct ? toOptions<IVersion>(props.selectedProduct.versions) : []}
        id={`${props.selectedProduct.product_name}-version`}
        placeholder="Version"
        title={`${props.selectedProduct.product_name} version dropdown`}
        disabled={props.disabled || isEmpty(props.selectedProduct.versions)}
        isInValid={!props.disabled && isVersionInValid}
        onChange={onVersionChange}
        onOuterClick={validateVersion}
      />
      </>
  );
}
