import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { FormattedMessage } from 'react-intl';
import {
  Tab,
  Tabs,
  TabList,
  TabPanel,
} from 'react-tabs';

import AnnotationsCards from '../ui/AnnotationsCards';
import DefinitionsCards from '../ui/DefinitionsCards';
import IssoThread from '../ui/IssoThread';
import { getTermId } from '../utils';

import './term.scss';

const TermPage = ({
  term,
  term64,
  defAndRef: defAndRefProp,
  messageId,
  activeTab,
  location,
  metacategories,
  topics,
  viaBaseUrl,
  discussionUrl,
}) => {
  const defAndRef = defAndRefProp || { definitions: [], references: [] };
  let { pathname } = location;
  const m = pathname.match(/(\/[^/]+\/[^/]+)(?:\/\d)?(?:\/.+)?/);
  pathname = m ? m[1] : pathname;
  return (
    <div className="term-entry">
      <h2>{term}</h2>
      <Tabs selectedTabPanelClassName="show active" selectedTabClassName="active" defaultIndex={activeTab || 0} forceRenderTabPanel>
        <TabList className="nav nav-tabs">
          <Tab className="nav-item nav-link">
            <FormattedMessage id="pages.glossary.definitions" defaultMessage="Definitions" />
            {' ('}
            {defAndRef.definitions && defAndRef.definitions.length}
            {')'}
          </Tab>
          <Tab className="nav-item nav-link">
            <FormattedMessage id="pages.glossary.references" defaultMessage="References" />
            {' ('}
            {defAndRef.references && defAndRef.references.length}
            {')'}
          </Tab>
          <Tab className="nav-item nav-link">
            <FormattedMessage id="pages.glossary.discussions" defaultMessage="Discussions" />
            {' ('}
            {defAndRef.messagesCount}
            {')'}
          </Tab>
        </TabList>
        <div className="tab-content term-tab-content">
          <TabPanel className="tab-pane fade">
            <DefinitionsCards annotations={defAndRef.definitions} metacategories={metacategories}><h4 className="text-muted text-capitalize"><FormattedMessage id="page.term.noDefinition" defaultMessage="No definition yet" /></h4></DefinitionsCards>
          </TabPanel>
          <TabPanel className="tab-pane fade">
            <AnnotationsCards
              annotations={defAndRef.references}
              viaBaseUrl={viaBaseUrl}
              metacategories={metacategories}
              categories={topics}
            >
              <h4 className="text-muted text-capitalize">
                <FormattedMessage id="page.term.noReference" defaultMessage="No reference yet" />
              </h4>
            </AnnotationsCards>
          </TabPanel>
          <TabPanel className="tab-pane fade">
            <IssoThread
              issoId={term64}
              pathname={`${pathname}/2`}
              messageId={messageId}
              discussionUrl={discussionUrl}
            />
          </TabPanel>
        </div>
      </Tabs>
    </div>
  );
};

TermPage.propTypes = {
  location: PropTypes.object.isRequired,
  term: PropTypes.string.isRequired,
  term64: PropTypes.string.isRequired,
  viaBaseUrl: PropTypes.string.isRequired,
  discussionUrl: PropTypes.string.isRequired,
  defAndRef: PropTypes.object,
  messageId: PropTypes.string,
  activeTab: PropTypes.number,
  metacategories: PropTypes.arrayOf(PropTypes.object).isRequired,
  topics: PropTypes.arrayOf(PropTypes.string).isRequired,
  dashboardId: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
};

TermPage.defaultProps = {
  defAndRef: {},
  messageId: null,
  activeTab: 0,
  dashboardId: '',
};

export default connect(
  (state, props) => {
    const { match, dashboardId } = props;
    const { params } = match;

    let { term } = (params || {});
    term = term ? decodeURIComponent(term) : term;

    const defAndRef = term ? state.terms[term] : {};

    const term64 = getTermId(term, dashboardId);

    const { messageId } = (params || {});

    const activeTab = Number((match.params || {}).activeTab || 0);

    return {
      term,
      term64,
      defAndRef,
      messageId,
      activeTab,
    };
  },
)(TermPage);