import React, { useEffect, useState } from "react";
import '../../../scss/settings/connect-tab.scss';
import Spinner from '../../common/Spinner';
import PassInputField from "../common-fields/PassInputField";
const { __ } = wp.i18n;
import { langString } from "../../../Helpers";

const ConnectTab = ({ formData, setFormData }) => {
  const [authUrl, setAuthUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [accessToken, setAccessToken] = useState('');

  const handleInputChange = (field, value) => {
    setFormData(prevState => ({
      ...prevState,
      [field]: value
    }));
  };

  useEffect(() => {
    fetchAccessToken();
  }, []);

  const fetchAccessToken = () => {
    setLoading(true);
    fetch('/wp-json/wemeet/v1/webex/fetch-token')
      .then(response => {
        if (!response.ok) {
          throw new Error(langString('failed_fetch_data'));
        }
        return response.json();
      })
      .then(data => {
        setAccessToken(data.access_token);
        setLoading(false);
      })
      .catch(error => {
        console.error(langString('error_fetch_token'), error);
        setLoading(false);
      });
  };

  const fetchAuthUrl = () => {
    setLoading(true);
    fetch('/wp-json/wemeet/v1/webex/auth-url')
      .then(response => response.json())
      .then(data => {
        setAuthUrl(data.auth_url);
        setLoading(false);
        // Redirect to the fetched URL in the current tab
        window.location.href = data.auth_url;
      })
      .catch(error => {
        console.error(langString('error_fetch_auth_url'), error);
        setLoading(false);
      });
  };

  const disconnectWebex = () => {
    setLoading(true);
    fetch('/wp-json/wemeet/v1/webex/revoke-access-token')
      .then(response => response.json())
      .then(data => {
        setLoading(false);
        // Redirect to the settings page after successful revocation
        window.location.href = data.redirect_url;
      })
      .catch(error => {
        console.error(langString('error_fetch_auth_url'), error);
        setLoading(false);
      });
  };


  const { client_id, client_secret } = formData;

  return (
    <div className="wemeet-connect-tab-content">
      <div className="accordion" id="wemeet-webex-credentials">
        <div className="webex-credentials-info">
          <h3 className="title">{langString('webex_oauth_credentials')}</h3>
          <p className="description">
            {langString('webex_oauth_setup_hint')}{' '}
            <a
              href="https://developer.webex.com/"
              target="_blank"
              rel="noreferrer noopener"
            >
              {langString('webex_developer_portal')}
            </a>
            . {langString('watch_our')}{' '}
            <a
              href="https://youtu.be/vV3EwUNJusk"
              target="_blank"
              rel="noreferrer noopener"
            >
              {langString('tutorial_video')}
            </a>{' '}
            {langString('for_guidance')}
          </p>
        </div>

        {client_id && client_secret && (
          <div className="webx-btn-wrapper">
            {accessToken.hasOwnProperty("access_token") &&
              accessToken.access_token.trim() !== "" ? (
              <a className="wemeet-connect-webex" onClick={disconnectWebex}>
                {langString('disconnect_webex')}
              </a>
            ) : (
              <a className="wemeet-connect-webex" onClick={fetchAuthUrl}>
                {langString('connect_webex')}
              </a>
            )}
          </div>
        )}

        <div className="wemeet-section-pannel">
          {/* Client ID */}
          <PassInputField
            label={langString('client_id')}
            type="password"
            id="wemeet_webex_client_id"
            name="wemeet_webex_client_id"
            value={client_id}
            onChange={(value) =>
              handleInputChange('client_id', value)
            }
          />

          {/* Client Secret */}
          <PassInputField
            label={langString('client_secret')}
            type="password"
            id="wemeet_webex_client_secret"
            name="wemeet_webex_client_secret"
            value={client_secret}
            onChange={(value) =>
              handleInputChange('client_secret', value)
            }
          />
        </div>

      </div>
    </div>
  );
};

export default ConnectTab;
