/* eslint-disable react/prop-types */
import { useState } from 'react';
import {
  AppBar,
  Grid,
  Tab,
  Tabs,
  Toolbar,
  makeStyles,
} from '@material-ui/core';
import { get, map } from 'lodash';
import { useQuery } from '@apollo/react-hooks';
import Alert from '../../Dialogs/Alert';
import Loading from '../../Loading';
import StudyInfo from './StudyTabs/StudyInfo';
import StudyTranslation from './StudyTabs/StudyTranslations';
import Questionnaire from './StudyTabs/Questionnaire';
import Sites from './StudyTabs/Sites';
import studyRefetchQueries from './StudyTabs/utils/refetchQueries';
import StudyLocales from './StudyTabs/StudyLocales';
import StudyTracks from './StudyTabs/StudyTracks';
import { getLocales, getFeatureOptions } from './StudyTabs/utils/queries';
import Reports from './StudyTabs/Reports';
import StudyResources from './StudyTabs/StudyResources';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
    color: 'white',
  },
  appBar: {
    backgroundColor: theme.palette.background.paper,
  },
}));

function Study({ studyId }) {
  console.log(studyId);
  const { loading, data } = useQuery(getLocales, { variables: { studyId } });
  const { data: featureOptionsData } = useQuery(getFeatureOptions, {
    variables: { studyId },
  });
  // const [alert, setAlert] = useState();
  // const [tab, setTab] = useState(0);

  if (loading) {
    return <Loading />;
  }

  const { refetchQueries } = studyRefetchQueries({ studyId });
  const locales = get(data, 'locales.nodes') || [];
  const currentLocales = map(locales, l => l.locale);

  const options = get(featureOptionsData, 'featureOptions') || [];

  console.log(options);

  return (
    <StudyTabs
      portalTypes={options}
      refetchQueries={refetchQueries}
      currentLocales={currentLocales}
      studyId={studyId}
      locales={locales}
    />
  );
}

const StudyTabs = ({
  portalTypes,
  refetchQueries,
  currentLocales,
  studyId,
  locales,
}) => {
  const classes = useStyles();
  const [alert, setAlert] = useState();
  const [selectedTabId, setSelectedTabId] = useState(0);
  const selectedTab = tabs[selectedTab];

  console.log('SELECTED TAB', selectedTab);

  console.log('PORTAL_TYPES', portalTypes);

  const props = { refetchQueries, currentLocales, setAlert, studyId, locales };
  return (
    <div className={classes.root}>
      <AppBar className={classes.appBar} position="static" elevation={0}>
        <Toolbar disableGutters>
          <Tabs
            value={selectedTabId}
            onChange={(e, newValue) => setSelectedTabId(newValue)}
          >
            {console.log('BEFORE IS VISIBLE', portalTypes)}
            {tabs.map(
              ({ isVisible, label }, i) =>
                isVisible(portalTypes) && <Tab key={i} label={label} />,
            )}
          </Tabs>
        </Toolbar>
      </AppBar>
      <Grid>
        {selectedTab.isVisible(portalTypes) && (
          <selectedTab.Content {...props} />
        )}
      </Grid>
      <Alert content={alert} closeDialog={setAlert} />
    </div>
  );
};

const tabs = [
  {
    label: 'Study Info',
    isVisible: () => true,
    Content: ({ studyId, refetchQueries, setAlert }) => (
      <StudyInfo
        studyId={studyId}
        refetchQueries={refetchQueries}
        setAlert={setAlert}
      />
    ),
  },
  {
    label: 'Study Tracks',
    isVisible: () => true,
    Content: ({ studyId }) => <StudyTracks studyId={studyId} />,
  },
  {
    label: 'User Admin',
    isVisible: () => true,
    Content: () => <div>USER ADMIN</div>,
  },
  {
    label: 'Study Locales',
    isVisible: () => true,
    Content: ({
      setAlert,
      studyId,
      locales,
      currentLocales,
      refetchQueries,
    }) => (
      <StudyLocales
        setAlert={setAlert}
        studyId={studyId}
        locales={locales}
        currentLocales={currentLocales}
        refetchQueries={refetchQueries}
      />
    ),
  },
  {
    label: 'Resources',
    isVisible: portalType => {
      console.log(portalType.engagementPortal);
    },

    Content: ({ studyId, locales }) => (
      <StudyResources studyId={studyId} locales={locales} />
    ),
  },
  {
    label: 'Pre-screener',
    isVisible: portalType => portalType.recruitmentPortal,
    Content: ({ currentLocales, refetchQueries, setAlert, studyId }) => (
      <Questionnaire
        type="PRESCREENER"
        preview
        locales={currentLocales}
        refetchQueries={refetchQueries}
        setAlert={setAlert}
        studyId={studyId}
      />
    ),
  },
  {
    label: 'Consent',
    isVisible: portalType => portalType.recruitmentPortal,
    Content: ({ currentLocales, refetchQueries, setAlert, studyId }) => (
      <Questionnaire
        type="CONSENT"
        locales={currentLocales}
        refetchQueries={refetchQueries}
        setAlert={setAlert}
        studyId={studyId}
      />
    ),
  },
  {
    label: 'Manuscript',
    isVisible: portalType => portalType.recruitmentPortal,
    Content: ({ currentLocales, refetchQueries, setAlert, studyId }) => (
      <Questionnaire
        type="MANUSCRIPT"
        locales={currentLocales}
        refetchQueries={refetchQueries}
        setAlert={setAlert}
        studyId={studyId}
      />
    ),
  },
  {
    label: 'Survey',
    isVisible: () => true,
    Content: ({ currentLocales, refetchQueries, setAlert, studyId }) => (
      <Questionnaire
        type="SURVEY"
        preview
        locales={currentLocales}
        refetchQueries={refetchQueries}
        setAlert={setAlert}
        studyId={studyId}
      />
    ),
  },
  {
    label: 'Translations',
    isVisible: portalType => portalType.recruitmentPortal,
    Content: ({ studyId, currentLocales, refetchQueries, setAlert }) => (
      <StudyTranslation
        studyId={studyId}
        locales={currentLocales}
        refetchQueries={refetchQueries}
        setAlert={setAlert}
      />
    ),
  },
  {
    label: 'Sites',
    isVisible: () => true,
    Content: ({ studyId, refetchQueries, setAlert, locales }) => (
      <Sites
        studyId={studyId}
        refetchQueries={refetchQueries}
        setAlert={setAlert}
        locales={locales}
      />
    ),
  },
  {
    label: 'eConsent',
    isVisible: portalType => portalType.consenteesPortal,
    Content: () => <div>E-CONSENT</div>,
  },
  {
    label: 'Reports',
    isVisible: portalType => portalType.recruitmentPortal,
    Content: ({ studyId }) => <Reports studyId={studyId} />,
  },
];

export default Study;