import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
import React from 'react';
import { useAtom, useOrderStaticData } from '../../../store';
import { capitalize } from '../../../utils';
import { selectedVisibilityAtom } from '../../store';

function VisibilityRadioButtons() {
  const [staticOrderData] = useOrderStaticData();
  const [selectedVisibility, setSelectedVisibility] = useAtom(
    selectedVisibilityAtom
  );

  const visibilityOptions = staticOrderData?.resource_visibility_type?.map(
    (option: any) => ({
      label: capitalize(option.type.replaceAll('_', ' ')),
      value: option.value.toString(),
    })
  );

  const handleRadioButtonChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const selectedValue = event.target.value;

    const selectedOption = visibilityOptions?.find(
      (option: any) => option.value === selectedValue
    );

    if (selectedOption) {
      setSelectedVisibility(selectedOption.value);
      console.log(selectedOption, 'selectedOption');
    }
  };

  return (
    <RadioButtonGroup
      selectedValue={selectedVisibility || []}
      heading="Visibility"
      options={visibilityOptions || []}
      required={false}
      onChange={handleRadioButtonChange}
    />
  );
}

export default VisibilityRadioButtons;
