import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
import List from 'components/routes/Settings/List';
import Detail from 'components/routes/Settings/Detail';
import Manage from 'components/routes/Settings/Manage';
import ListIntegrations from 'components/routes/Settings/Integrations/List';
import DetailIntegration from 'components/routes/Settings/Integrations/Detail';
import { useDispatch } from 'react-redux';
import settings from 'store/settings';
import config from 'config/general';
import styleIdentifiers from './settings.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type SettingsProps = StateProps & DispatchProps & OwnProps;

const Settings = (props: SettingsProps) => {
  const { match } = props;

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(settings.actions.getProjectSettings.request.action());
  }, []);

  if (match.isExact) return <Redirect to="/settings/email" />;

  return (
    <div className={styles('Settings')}>
      <div className={styles('nav-container')}>
        <div className={styles('nav')}>
          <div className={styles('page')}>
            <NavLink
              to="/settings/email"
              className={styles('item', 'link-wrapper')}
              activeClassName={styles('state-active')}
            >
              <span>Email</span>
            </NavLink>
            {!config.noActiveCampaign && (
              <NavLink
                to="/settings/activeCampaign"
                className={styles('item', 'link-wrapper')}
                activeClassName={styles('state-active')}
              >
                <span>Active Campaign</span>
              </NavLink>
            )}
            {!config.noIntegrations && (
              <NavLink
                to="/settings/integrations"
                className={styles('item', 'link-wrapper')}
                activeClassName={styles('state-active')}
              >
                <span>Integrations</span>
              </NavLink>
            )}
          </div>
        </div>
      </div>
      <Switch>
        <Route exact path="/settings/integrations" component={ListIntegrations} />
        <Route exact path="/settings/integrations/:type" component={DetailIntegration} />
        <Route exact path="/settings/:resource" component={List} />
        <Route exact path="/settings/:resource/create" component={Manage} />
        <Route exact path="/settings/:resource/:id" component={Detail} />
        <Route exact path="/settings/:resource/:id/edit" component={Manage} />
        <Route exact path="/settings/:resource/:id/:subResource" component={Detail} />
      </Switch>
    </div>
  );
};

export default Settings;
