import React, { useEffect } from 'react';
import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
import styled from 'styled-components';
import { useSelectedData, useVisibilityData } from '../../store';

function NoteType() {
  const [visibilityData] = useVisibilityData();
  const [selected, setSelected] = useSelectedData();

  useEffect(() => {
    if (visibilityData && !selected) {
      const defaultOption = visibilityData?.find(
        (option: any) => option.type === 'Private'
      );
      if (defaultOption) {
        setSelected(defaultOption.value);
      }
    }
  }, [visibilityData, selected, setSelected]);

  const handleRadioButtonChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const selectedValue = event.target.value;
    const selectedOption = visibilityData?.find(
      (option: any) => option.value === selectedValue
    );
    if (selectedOption) {
      setSelected(selectedOption.value);
    }
  };

  return (
    <Container>
      <RadioButtonGroup
        selectedValue={selected}
        heading=""
        options={visibilityData?.map((client: any) => ({
          label: client.type,
          value: client.value,
        }))}
        onChange={handleRadioButtonChange}
        required={false}
      />
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
`;

export default NoteType;
