import React from 'react';
import classnames from 'classnames';
import get from 'lodash/get';
import { updateSettingsSelectedTab } from 'providers/ReduxStore/slices/collections';
import { useDispatch } from 'react-redux';
import ProxySettings from './ProxySettings';
import ClientCertSettings from './ClientCertSettings';
import Headers from './Headers';
import Auth from './Auth';
import Script from './Script';
import Test from './Tests';
import Protobuf from './Protobuf';
import StyledWrapper from './StyledWrapper';
import Vars from './Vars/index';
import StatusDot from 'components/StatusDot';
import Overview from './Overview/index';

const CollectionSettings = ({ collection }) => {
  const dispatch = useDispatch();
  const tab = collection.settingsSelectedTab;
  const setTab = (tab) => {
    dispatch(
      updateSettingsSelectedTab({
        collectionUid: collection.uid,
        tab
      })
    );
  };

  const root = collection?.draft?.root || collection?.root;
  const hasScripts = root?.request?.script?.res || root?.request?.script?.req;
  const hasTests = root?.request?.tests;
  const hasDocs = root?.docs;

  const headers = collection.draft?.root ? get(collection, 'draft.root.request.headers', []) : get(collection, 'root.request.headers', []);
  const activeHeadersCount = headers.filter((header) => header.enabled).length;

  const requestVars = collection.draft?.root ? get(collection, 'draft.root.request.vars.req', []) : get(collection, 'root.request.vars.req', []);
  const activeVarsCount = requestVars.filter((v) => v.enabled).length;
  const authMode = (collection.draft?.root ? get(collection, 'draft.root.request.auth', {}) : get(collection, 'root.request.auth', {})).mode || 'none';

  const proxyConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.proxy', {}) : get(collection, 'brunoConfig.proxy', {});
  const proxyEnabled = proxyConfig.hostname ? true : false;
  const clientCertConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.clientCertificates.certs', []) : get(collection, 'brunoConfig.clientCertificates.certs', []);
  const protobufConfig = collection.draft?.brunoConfig ? get(collection, 'draft.brunoConfig.protobuf', {}) : get(collection, 'brunoConfig.protobuf', {});

  const getTabPanel = (tab) => {
    switch (tab) {
      case 'overview': {
        return <Overview collection={collection} />;
      }
      case 'headers': {
        return <Headers collection={collection} />;
      }
      case 'vars': {
        return <Vars collection={collection} />;
      }
      case 'auth': {
        return <Auth collection={collection} />;
      }
      case 'script': {
        return <Script collection={collection} />;
      }
      case 'tests': {
        return <Test collection={collection} />;
      }
      case 'proxy': {
        return <ProxySettings collection={collection} />;
      }
      case 'clientCert': {
        return (
          <ClientCertSettings
            collection={collection}
          />
        );
      }
      case 'protobuf': {
        return <Protobuf collection={collection} />;
      }
    }
  };

  const getTabClassname = (tabName) => {
    return classnames(`tab select-none ${tabName}`, {
      active: tabName === tab
    });
  };

  return (
    <StyledWrapper className="flex flex-col h-full relative px-4 py-4 overflow-hidden">
      <div className="flex flex-wrap items-center tabs" role="tablist">
        <div className={getTabClassname('overview')} role="tab" onClick={() => setTab('overview')}>
          Overview
        </div>
        <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
          Headers
          {activeHeadersCount > 0 && <sup className="ml-1 font-medium">{activeHeadersCount}</sup>}
        </div>
        <div className={getTabClassname('vars')} role="tab" onClick={() => setTab('vars')}>
          Vars
          {activeVarsCount > 0 && <sup className="ml-1 font-medium">{activeVarsCount}</sup>}
        </div>
        <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
          Auth
          {authMode !== 'none' && <StatusDot />}
        </div>
        <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
          Script
          {hasScripts && <StatusDot />}
        </div>
        <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
          Tests
          {hasTests && <StatusDot />}
        </div>
        <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
          Proxy
          {Object.keys(proxyConfig).length > 0 && proxyEnabled && <StatusDot />}
        </div>
        <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
          Client Certificates
          {clientCertConfig.length > 0 && <StatusDot />}
        </div>
        <div className={getTabClassname('protobuf')} role="tab" onClick={() => setTab('protobuf')}>
          Protobuf
          {protobufConfig.protoFiles && protobufConfig.protoFiles.length > 0 && <StatusDot />}
        </div>
      </div>
      <section className="mt-4 h-full overflow-auto">{getTabPanel(tab)}</section>
    </StyledWrapper>
  );
};

export default CollectionSettings;