import React from 'react';
import { Icon, Select } from '@seeqdev/qomponents';

export interface SelectOption {
  id: string;
  label: string;
  color: string;
  asset: string;
  type: 'SCALAR' | 'STRING' | 'NUMERIC';
}

const options: SelectOption[] = [
  { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
  { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
  { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
];

interface ComplexSelectExampleProps {
  onChange: (selectedOption: SelectOption) => void;
  value: SelectOption | undefined;
}

function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
  const getIcon = (type: string) => {
    switch (type) {
      case 'STRING':
        return 'fa fa-font';
      case 'SCALAR':
        return 'fc-scalar';
      default:
        return 'fc-series';
    }
  };
  /**
   * This function formats the select option as desired. You can apply css styling here or use additional qomponents
   * to style the select option display.
   *
   * You can use the same function to format the selected value or use a different one (sometimes having a separate
   * function is helpful if you want to limit the space that is taken up by the selected option).
   *
   * This example shows how to use an additional Icon component (styled in color based on the select option) as well
   * as how to display the properties of the select option
   */
  const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
    return (
      <div className="selectOptionWrapperDiv">
        <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
        <div className="selectOptionDiv">
          <div className="selectOption">
            <strong>{optionValue.label}</strong>
          </div>
          <div className="selectOptionSubText">{optionValue.asset}</div>
        </div>
      </div>
    );
  };
  const getOptionValue = (option: SelectOption) => {
    return option.id;
  };

  return (
    // use the getOptionLabel function to provide a custom render function that determines how the select options
    // are displayed
    // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
    // option is displayed
    <Select
      placeholder="formatted select options"
      extraClassNames="formElementWidth"
      options={options}
      value={value}
      getOptionLabel={getOptionLabel}
      getOptionValue={getOptionValue}
      getSelectedValueLabel={getOptionLabel}
      onChange={(selectedOption: SelectOption) => {
        onChange(selectedOption);
      }}
    />
  );
}

export default ComplexSelectExample;