import { useContext, useEffect, useState } from 'react';
import Switch from '../Switch';

import {
  PremiumSettingsContext,
  PremiumSettingsDispatchContext,
} from '../../context/contexts';

export default function NoPoweredBy() {
  const premiumSettings = useContext(PremiumSettingsContext);
  const dispatchPremiumSettings = useContext(PremiumSettingsDispatchContext);
  const [noPoweredBy, setNoPoweredBy] = useState<boolean>(
    premiumSettings.noPoweredBy
  );

  useEffect(() => {
    if (premiumSettings) {
      setNoPoweredBy(premiumSettings.noPoweredBy);
    }
  }, [premiumSettings]);

  async function callBack() {
    try {
      setNoPoweredBy(!noPoweredBy);
      const result = await fetch(
        `${wpApiSettings.root}botfoundry/v1/set-no-powered-by`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-WP-Nonce': wpApiSettings.nonce,
          },
          body: JSON.stringify({
            noPoweredBy: !noPoweredBy,
          }),
        }
      );

      if (!result.ok) {
        throw new Error('An error occurred while fetching settings.');
      }
      const data = await result.json();
      if (data.settings) {
        dispatchPremiumSettings({
          type: 'SET_PREMIUM_SETTINGS',
          payload: data.settings,
        });
      }
    } catch (error) {
      console.error(error);
    }
  }
  return (
    <div className="visible-on-pages">
      <h4 className="mt-0 mb-8">No powered by</h4>
      <p>You can disable the "powered by" footer.</p>
      <div className="d-flex gap-8">
        <div className="botfoundry-input">
          <Switch enabled={noPoweredBy} callBack={callBack} />
        </div>
      </div>
    </div>
  );
}