import React, { useState, useEffect } from 'react';
import Button from 'react-bootstrap/Button';
import SelectSearch, { fuzzySearch } from 'react-select-search';

export const Restapi = ({
  optionchanged, createDataSource, options, isSaving
}) => {
  const [authType, setAuthType] = useState(options.auth_type);

  useEffect(() => {
    setAuthType(options.auth_type.value);
  }, [options.auth_type]);

  const [grantType, setGrantType] = useState(options.grant_type);

  useEffect(() => {
    setGrantType(options.grant_type.value);
  }, [options.grant_type]);

  const [addTokenTo, setAddTokenTo] = useState(options.add_token_to.value);

  useEffect(() => {
    setAddTokenTo(options.add_token_to.value);
  }, [options.add_token_to]);

  function addNewKeyValuePair(option) {
    const newPairs = [...options[option].value, ['', '']];
    optionchanged(option, newPairs);
  }

  function removeKeyValuePair(option, index) {
    options[option].value.splice(index, 1);
    optionchanged(option, options[option].value);
  }

  function keyValuePairValueChanged(e, keyIndex, option, index) {
    const value = e.target.value;
    options[option].value[index][keyIndex] = value;
    optionchanged(option, options[option].value);
  }

  return (
    <div>
      <div className="row">
        <div className="col-md-12">
          <label className="form-label">URL</label>
          <input
            type="text"
            placeholder="https://api.example.com/v1/"
            className="form-control"
            onChange={(e) => optionchanged('url', e.target.value)}
            value={options.url.value}
          />
        </div>
      </div>
      <div className="row mt-3">
        <div className="row g-2">
          <div className="row">
            <div className="col">
              <label className="form-label pt-2">Headers</label>
            </div>
            <div className="col-auto">
              <button className="btn btn-outline-primary btn-sm" onClick={() => addNewKeyValuePair('headers')}>
                + Add new
              </button>
            </div>
          </div>
          <div className="col-md-12 mb-3">
            {options.headers.value.map((pair, index) => (
              <div className="input-group">
                <input
                  type="text"
                  value={pair[0]}
                  className="form-control"
                  placeholder="key"
                  autoComplete="off"
                  onChange={(e) => keyValuePairValueChanged(e, 0, 'headers', index)}
                />
                <input
                  type="text"
                  value={pair[1]}
                  className="form-control"
                  placeholder="value"
                  autoComplete="off"
                  onChange={(e) => keyValuePairValueChanged(e, 1, 'headers', index)}
                />
                <span
                  className="input-group-text"
                  role="button"
                  onClick={() => {
                    removeKeyValuePair('headers', index);
                  }}
                >
                  x
                </span>
              </div>
            ))}
          </div>
        </div>
        <label className="form-label text-muted">Authentication Type</label>
        <SelectSearch
          options={[
            { name: 'None', value: 'none' },
            { name: 'OAuth 2.0', value: 'oauth2' }
          ]}
          value={options.auth_type.value}
          search={false}
          onChange={(value) => {
            optionchanged('auth_type', value);
          }}
          filterOptions={fuzzySearch}
          placeholder="Select.."
        />
      </div>

      {authType === 'oauth2' && (
        <div>
          <hr />
          <h3 className="text-muted">Authentication</h3>
          <div className="row mt-3">
            <label className="form-label text-muted">Grant Type</label>
            <SelectSearch
              options={[
                { name: 'Client Credentials', value: 'client_credentials' },
                { name: 'Authorization Code', value: 'authorization_code' }
              ]}
              value={options.grant_type.value}
              search={false}
              onChange={(value) => {
                optionchanged('grant_type', value);
              }}
              filterOptions={fuzzySearch}
              placeholder="Select.."
            />

            <label className="form-label text-muted mt-3">Add Access Token To</label>
            <SelectSearch
              options={[
                { name: 'Request Header', value: 'header' },
                { name: 'Request URL', value: 'url' }
              ]}
              value={options.add_token_to.value}
              search={false}
              onChange={(value) => {
                optionchanged('add_token_to', value);
              }}
              filterOptions={fuzzySearch}
              placeholder="Select.."
            />

            {addTokenTo === 'header' && (
              <div className="col-md-12">
                <label className="form-label text-muted mt-3">Header Prefix</label>
                <input
                  type="text"
                  className="form-control"
                  onChange={(e) => optionchanged('header_prefix', e.target.value)}
                  value={options.header_prefix.value}
                />
              </div>
            )}
          </div>

          <div className="col-md-12">
            <label className="form-label text-muted mt-3">Access Token URL</label>
            <input
              type="text"
              placeholder="https://api.example.com/oauth/token"
              className="form-control"
              onChange={(e) => optionchanged('access_token_url', e.target.value)}
              value={options.access_token_url.value}
            />
          </div>

          <div className="col-md-12">
            <label className="form-label text-muted mt-3">Client ID</label>
            <input
              type="text"
              className="form-control"
              onChange={(e) => optionchanged('client_id', e.target.value)}
              value={options.client_id.value}
            />
          </div>

          <div className="col-md-12">
            <label className="form-label text-muted mt-3">
              Client Secret
              <small className="text-green mx-2">
                <img className="mx-2" src="https://www.svgrepo.com/show/12694/padlock.svg" width="12" height="12" />
                Encrypted
              </small>
            </label>
            <input
              type="text"
              className="form-control"
              onChange={(e) => optionchanged('client_secret', e.target.value)}
              value={options.client_secret.value}
            />
          </div>

          <div className="col-md-12">
            <label className="form-label text-muted mt-3">Scope(s)</label>
            <input
              type="text"
              className="form-control"
              onChange={(e) => optionchanged('scopes', e.target.value)}
              value={options.scopes.value}
            />
          </div>

          {grantType === 'authorization_code' && (
            <div>
              <div className="col-md-12">
                <label className="form-label text-muted mt-3">Authorization URL</label>
                <input
                  type="text"
                  placeholder="https://api.example.com/oauth/authorize"
                  className="form-control"
                  onChange={(e) => optionchanged('auth_url', e.target.value)}
                  value={options.auth_url.value}
                />
              </div>

              <div className="row mt-3">
                <div className="col">
                  <label className="form-label pt-2">Custom Authentication Parameters</label>
                </div>
                <div className="col-auto">
                  <button
                    className="btn btn-outline-primary btn-sm"
                    onClick={() => addNewKeyValuePair('custom_auth_params')}
                  >
                    + Add new
                  </button>
                </div>
              </div>
              <div className="col-md-12 mb-3">
                {options.custom_auth_params.value.map((pair, index) => (
                  <div className="input-group" key={index}>
                    <input
                      type="text"
                      value={pair[0]}
                      className="form-control"
                      placeholder="key"
                      autoComplete="off"
                      onChange={(e) => keyValuePairValueChanged(e, 0, 'custom_auth_params', index)}
                    />
                    <input
                      type="text"
                      value={pair[1]}
                      className="form-control"
                      placeholder="value"
                      autoComplete="off"
                      onChange={(e) => keyValuePairValueChanged(e, 1, 'custom_auth_params', index)}
                    />
                    <span
                      className="input-group-text"
                      role="button"
                      onClick={() => {
                        removeKeyValuePair('custom_auth_params', index);
                      }}
                    >
                      x
                    </span>
                  </div>
                ))}
              </div>

              <label className="form-label text-muted mt-3">Client Authentication</label>
              <SelectSearch
                options={[
                  { name: 'Send as Basic Auth header', value: 'header' },
                  { name: 'Send client credentials in body ', value: 'body' }
                ]}
                value={options.client_auth.value}
                search={false}
                onChange={(value) => {
                  optionchanged('client_auth', value);
                }}
                filterOptions={fuzzySearch}
                placeholder="Select.."
              />
            </div>
          )}
        </div>
      )}

      <div className="row mt-3">
        <div className="col"></div>
        <div className="col-auto">
          <Button className="m-2" disabled={isSaving} variant="primary" onClick={createDataSource}>
            {isSaving ? 'Saving...' : 'Save'}
          </Button>
        </div>
      </div>
    </div>
  );
};
