import { useState } from 'react';
import { RadioGroup } from '@headlessui/react';
import propTypes from 'prop-types';

const _data = {
  job: [{
    id:1,
    position: ".Net"
  },
]
}

export default function HashPositions(props) {
  let defaultPositionSelection = props.defaultPositionSelection;
  //const cntCareersJobs = props.cntCareers;
  let [selected, setSelected] = useState('#dotNet');

  function handleChange(event) {
    setSelected(event.target.innerText);
    //console.log(event.target.innerText);
    props.setSelectedPosition(event.target.innerText);
  }


  return (
    <RadioGroup
      value={
        defaultPositionSelection != null && defaultPositionSelection != ''
          ? defaultPositionSelection
          : selected
      }
      onChange={setSelected}
      className="flex flex-col items-start justify-center"
    >
      <RadioGroup.Label className="block text-sm font-medium text-gray-700 dark:text-gray-400 mr-4">
        Select Position
      </RadioGroup.Label>
      <div className="mt-1 mb-4 flex flex-row items-center justify-start">
        {_data.job.map(job => (
          <RadioGroup.Option key={job.id} value={'#' + job.position}>
            {({ checked }) => (
              <span
                onClick={() => {
                  props.setOtherInputState(true);
                  defaultPositionSelection = '';
                  handleChange(event);
                  props.hashToFormData(selected);
                }}
                className={
                  checked
                    ? 'transition-all bg-dg-primary-900 rounded-lg py-1 px-3 text-white text-sm mr-2'
                    : 'transition-all px-3 mr-2 text-sm hover:cursor-pointer hover:bg-opacity-100 bg-opacity-50 py-1 bg-dg-primary-900 text-white rounded-lg hover:transition-all'
                }
              >
                {'#' + job.position}
              </span>
            )}
          </RadioGroup.Option>
        ))}

        <RadioGroup.Option value="#Other">
          {({ checked }) => (
            <span
              onClick={() => {
                props.setOtherInputState(false);
                defaultPositionSelection = '';
                props.setSelectedPosition('#Other');
                props.hashToFormData(selected);
              }}
              className={
                checked
                  ? 'transition-all bg-dg-primary-900 rounded-lg py-1 px-3 text-white text-sm'
                  : 'transition-all px-3 text-sm hover:cursor-pointer hover:bg-opacity-100 bg-opacity-50 py-1 bg-dg-primary-900 text-white rounded-lg hover:transition-all'
              }
            >
              #Other
            </span>
          )}
        </RadioGroup.Option>
      </div>
    </RadioGroup>
  );
}

HashPositions.propTypes = {
  otherInputState: propTypes.boolean,
  defaultPositionSelection: propTypes.string,
  setSelectedPosition: propTypes.func,
};