import { useContext } from 'react';
import DropDown from '../../components/DropDown';
import {
  SettingsContext,
  SettingsDispatchContext,
} from '../../context/contexts';
import axios from 'axios';
import { useGetSettings } from '../../utils/functions';
import Input from '../../components/Input/input';

export default function SelectAi() {
  const getSettings = useGetSettings();
  const items = [
    { value: 1, label: 'GPT-4o-mini (Default)', disabled: false },
    { value: 2, label: 'GPT-4o', disabled: true },
  ];

  const settings = useContext(SettingsContext);
  const dispatch = useContext(SettingsDispatchContext);

  function onChange(data: any) {
    axios
      .post(
        `${wpApiSettings.root}botfoundry/v1/set-ai`,
        { ai: data.label },
        {
          headers: {
            'X-WP-Nonce': wpApiSettings.nonce, // Include the nonce for authentication
          },
        }
      )
      .then((response) => {
        if (response.data.settings) {
          dispatch({
            type: 'SET_SETTINGS',
            payload: response.data,
          });
        }
      })
      .catch((error) => {
        console.error(error);
      })
      .finally(() => {
        getSettings();
      });
  }

  return (
    <>
      <p>
        Choose the AI you want to use for your chatbot. You can always change
        this later.
      </p>
      <Input label="Select ai" value={settings.ai} onChange={onChange}>
        <DropDown
          id="select-ai"
          selected={settings.ai}
          items={items}
          onChange={onChange}
        />
      </Input>
    </>
  );
}