var React = require('react');
import {CVC} from '@canimmunize/cvc-js';
import {Tab} from 'react-bootstrap';
import {ResponsiveTabs} from './table_components/tabs';
import ConceptsTable from './concepts_table';
import GenericDetail from './table_components/generic/generic_detail.js';
import TradenameDetail from './table_components/tradename/tradename_detail.js';
import DiseaseDetail from './table_components/disease/disease_detail.js';
import AntigenDetail from './table_components/antigen/antigen_detail.js';
import LotDetail from './table_components/lot/lot_detail.js';
import GtinDetail from './table_components/gtin/gtin_detail.js';
import NIDDDetail from './table_components/nidd/nidd_detail.js';
import BaseHeader from './table_components/base_header';

const antigenDiseaseTableConfig = {
  headers: [
    {weight: 9, mobileWeight: 6, label: 'Display Term'},
    {weight: 3, mobileWeight: 6, label: 'Concept ID'},
  ],
  rowFormats: [
    {weight: 9, mobileWeight: 6, field: 'displayTerm.en'},
    {weight: 3, mobileWeight: 6, field: 'conceptId'},
  ],
};

const niddTableConfig = {
  headers: [
    {weight: 9, mobileWeight: 6, label: 'Display Term'},
    {weight: 3, mobileWeight: 6, label: 'Concept ID'},
  ],
  rowFormats: [
    {weight: 9, mobileWeight: 6, field: 'displayTerm.en'},
    {weight: 3, mobileWeight: 6, field: 'conceptId'},
  ],
};

const tabConfig = [
  {
    key: 'generics',
    tabTitle: 'Generics',
    title: 'Generic Immunizing Agents',
    description:
      'Generic Immunizing Agents subset contains generically described vaccines and passive immunizing agents used in Canada. It is an extension of the Pan-Canadian Immunization Reference Sets Vaccine Historical Name Code and Passive Historical Immunizing Agent Code subset developed by Canada Health Infoway.',
    tableConfig: {
      headers: [
        {weight: 2, mobileWeight: 6, label: 'Abbreviation'},
        {weight: 7, mobileWeight: 6, label: 'Display Term'},
        {weight: 3, mobileWeight: 0, label: 'SNOMED CT ID'},
      ],
      rowKeyField: 'code',
      rowFormats: [
        {weight: 2, mobileWeight: 6, field: 'abbreviation.en'},
        {weight: 7, mobileWeight: 6, field: 'publicPicklistTerm.en'},
        {weight: 3, mobileWeight: 0, field: 'conceptId'},
      ],
    },
    header: BaseHeader,
    detail: GenericDetail,
  },
  {
    key: 'tradenames',
    tabTitle: 'Tradenames',
    title: 'Tradename Immunizing Agents',
    description:
      'Tradename Immunizing Agents subset contains tradenames of vaccines and passive immunizing agents used in Canada. It is an extension of the Pan-Canadian Immunization Reference Sets Vaccine Administered Trade Name Code and Immunioglobulin Code subset developed by Canada Health Infoway.',
    tableConfig: {
      headers: [
        {weight: 2, mobileWeight: 6, label: 'Abbreviation'},
        {weight: 7, mobileWeight: 6, label: 'Display Term'},
        {weight: 3, mobileWeight: 0, label: 'SNOMED CT ID'},
      ],
      rowKeyField: 'code',
      rowFormats: [
        {weight: 2, mobileWeight: 6, field: 'abbreviation.en'},
        {weight: 7, mobileWeight: 6, field: 'publicPicklistTerm.en'},
        {weight: 3, mobileWeight: 0, field: 'conceptId'},
      ],
    },
    header: BaseHeader,
    detail: TradenameDetail,
  },
  {
    key: 'diseases',
    tabTitle: 'Diseases',
    title: 'Vaccine Preventable Disease',
    description:
      'The Vaccine Preventable Disease subset is an extension of the Pan-Canadian Immunization Reference Sets Vaccine Preventable Disease Code subset developed by Canada Health Infoway.',
    tableConfig: antigenDiseaseTableConfig,
    header: BaseHeader,
    detail: DiseaseDetail,
  },
  {
    key: 'antigens',
    tabTitle: 'Antigen/Immunoglobulin/Antitoxin',
    title: 'Antigen/Immunoglobulin/Antitoxin',
    description:
      'Antigen/Immunoglobulin/Antitoxin subset is an extension of the Pan-Canadian Immunization Reference Sets Antigen Code and Immunoglobulin Code, subset developed by Canada Health Infoway.',
    tableConfig: antigenDiseaseTableConfig,
    header: BaseHeader,
    detail: AntigenDetail,
  },
  {
    key: 'adminGender',
    tabTitle: 'Administrative Gender',
    title: 'Administrative Gender',
    description:
      'Administrative gender subset contains the gender of a person used for administrative purposes (as opposed to clinical gender). This subset is an extension of the AdministrativeGenderCode subset developed by Canada Health Infoway. ',
    tableConfig: niddTableConfig,
    header: BaseHeader,
    detail: NIDDDetail,
  },
  {
    key: 'anatomicalSite',
    tabTitle: 'Anatomical Site',
    title: 'Anatomical Site',
    description:
      'Anatomical Site subset describes where the body the immunization was administered. The subset is an extension of the AnatomicalSiteCode subset developed by Canada Health Infoway.',
    tableConfig: niddTableConfig,
    header: BaseHeader,
    detail: NIDDDetail,
  },
  {
    key: 'repSource',
    tabTitle: 'Reporting Source',
    title: 'Reporting Source',
    description:
      'The Reporting Source picklist identifies the source from which this immunization record originated.',
    tableConfig: niddTableConfig,
    header: BaseHeader,
    detail: NIDDDetail,
  },
  {
    key: 'routeOfAdmin',
    tabTitle: 'Route Of Administration',
    title: 'Route Of Administration',
    description:
      'Route of Administration subset describes which path the administered immunization takes to get into the body. This subset is an extension of the RouteOfAdministration subset developed by Canada Health Infoway.',
    tableConfig: niddTableConfig,
    header: BaseHeader,
    detail: NIDDDetail,
  },
  {
    key: 'forecastStatus',
    tabTitle: 'Forecast Status',
    title: 'Forecast Status',
    description:
      "Forecast status subset represents the patient's status with respect to immunization guidelines as of an evaluation date. The subset is an extension of the Immunization Forcast Status developed by Canada Health Infoway.",
    tableConfig: niddTableConfig,
    header: BaseHeader,
    detail: NIDDDetail,
  },
  {
    key: 'shelfStatus',
    tabTitle: 'Shelf Status',
    title: 'Shelf Status',
    description:
      'Shelf Status subset describes if the agent/tradename is or has been licensed for use in Canada, is part of a special access program or is an international vaccine.',
    tableConfig: niddTableConfig,
    header: BaseHeader,
    detail: NIDDDetail,
  },
  // {
  //   key: 'aad',
  //   tabTitle: 'Agent/Antigen/Disease Mapping',
  //   title: 'Agent/Antigen/Disease Mapping',
  //   description:
  //     'This tab contains mappings between the generic concept subset (agents), the antigen concepts, and the vaccine preventable disease concepts.',
  //   tableConfig: niddTableConfig,
  //   header: BaseHeader,
  //   detail: NIDDDetail,
  // },
  // {
  //   key: 'vaccineRouteOfAdminMap',
  //   tabTitle: 'Vaccine/Route Map',
  //   title: 'Vaccine/Route of Administration Map',
  //   description:
  //     "This tab contains mappings between the tradename immunizing agent concepts and the concepts representing the vaccine product's indicated route(s) of administration.",
  //   tableConfig: niddTableConfig,
  //   header: BaseHeader,
  //   detail: NIDDDetail,
  // },
  {
    key: 'lotData',
    tabTitle: 'Lot Lookup',
    title: 'Vaccine Lots',
    description:
      'This list contains Lot Number and Expiry data for all vaccines licensed for use by Health Canada. Each lot is mapped to its corresponding Tradename Vaccine concept. The lot information in the Canadian Vaccine Catalogue is updated monthly by Health Canada.',
    tableConfig: {
      headers: [
        {weight: 2, mobileWeight: 6, label: 'Lot Number'},
        // {weight: 8, mobileWeight: 6, label: 'Product'},
        {weight: 2, mobileWeight: 0, label: 'DIN'},
        {weight: 8, mobileWeight: 6, label: 'Concept'},
      ],
      rowFormats: [
        {weight: 2, mobileWeight: 6, field: 'lotNumber'},
        {weight: 2, mobileWeight: 0, field: 'din'},
        {weight: 8, mobileWeight: 6, field: 'concept.publicPicklistTerm.en'},
      ],
    },
    header: BaseHeader,
    detail: LotDetail,
  },
  {
    key: 'gtins',
    tabTitle: 'GTIN Lookup',
    title: 'Global Trade Item Numbers (GTIN)',
    description:
      'This list contains Global Trade Item Numbers (GTIN) for vaccines in Canada. Each GTIN is mapped to its corresponding Tradename Vaccine Concept. The GTIN information in the Canadian Vaccine Catalogue is provided by vaccine manufacturers via the GS1® ECCnet Registry.',
    tableConfig: {
      headers: [
        {weight: 2, mobileWeight: 6, label: 'GTIN'},
        {weight: 7, mobileWeight: 6, label: 'Product'},
        {weight: 3, mobileWeight: 0, label: 'Hierarchy'},
      ],
      rowFormats: [
        {weight: 2, mobileWeight: 6, field: 'gtin'},
        {weight: 7, mobileWeight: 6, field: 'concept.publicPicklistTerm.en'},
        {weight: 3, mobileWeight: 0, field: 'productType'},
      ],
    },
    header: BaseHeader,
    detail: GtinDetail,
  },
];

/**
 * This CVCTable component is responsible for configuring the individual ConceptsTables within the responsive tabs controller
 *
 * Component Hierarchy:
 * CVCTable
 * -- [ ConceptsTable ]
 *        -- Table
 */

export default class CVCTable extends React.Component {
  constructor(props) {
    super(props);

    this.handleSelect = this.handleSelect.bind(this);

    CVC.initFromApi('https://cvc.canimmunize.ca/v3').then((result) => {
      console.log('CVC', result);
      this.setState({cvc: result});
    });

    this.state = {
      cvc: {
        generics: [],
        tradenames: [],
        products: [],
      },
    };
  }

  static propTypes() {
    return {
      match: PropTypes.object.isRequired,
      location: PropTypes.object.isRequired,
      history: PropTypes.object.isRequired,
    };
  }

  handleSelect(key) {
    this.props.history.push({
      pathname: key,
    });
  }

  render() {
    const {match, location, history} = this.props;

    const locationComps = location.pathname.replace('/', '').split('_');

    const validKeys = tabConfig.map((config) => config.key);

    const selectedTable = validKeys.indexOf(locationComps[0]) > -1 ? locationComps[0] : 'generics';
    const rowId = locationComps.length > 1 ? locationComps[1] : '';

    return (
      <ResponsiveTabs
        className="cvc-explorer"
        defaultActiveKey={'generics'}
        activeKey={selectedTable}
        onSelect={this.handleSelect}
        id="uncontrolled-tab-example"
        animation={false}
        validKeys={validKeys}
      >
        {tabConfig.map((config) => {
          return (
            <Tab key={config.key} eventKey={config.key} title={config.tabTitle}>
              <ConceptsTable
                {...this.props}
                subsetKey={config.key}
                selectedTable={selectedTable}
                selectedRowId={rowId}
                data={this.state.cvc[config.key]}
                tableConfig={config.tableConfig}
                header={config.header}
                detailView={config.detail}
                title={config.title}
                description={config.description}
              />
            </Tab>
          );
        })}

        {/* <Tab eventKey={'generic'} title="Generics">
          <ConceptsTable
            {...this.props}
            tableType={'generic'}
            selectedTable={selectedTable}
            selectedRowId={rowId}
            data={this.state.cvc.generics}
            tableConfig={{
              headers: [
                {weight: 2, mobileWeight: 6, label: 'Abbreviation'},
                {weight: 7, mobileWeight: 6, label: 'Display Term'},
                {weight: 3, mobileWeight: 0, label: 'SNOMED CT ID'},
              ],
              rowKeyField: 'code',
              rowFormats: [
                {weight: 2, mobileWeight: 6, field: 'abbreviation.en'},
                {weight: 7, mobileWeight: 6, field: 'displayTerm.en'},
                {weight: 3, mobileWeight: 0, field: 'id'},
              ],
            }}
            header={GenericHeader}
            detailView={GenericDetail}
          />
        </Tab>
        <Tab eventKey={'tradename'} title="Tradenames">
          <ConceptsTable
            {...this.props}
            tableType={'tradename'}
            selectedTable={selectedTable}
            selectedRowId={rowId}
            data={this.state.cvc.tradenames}
            tableConfig={{
              headers: [
                {weight: 2, mobileWeight: 6, label: 'Abbreviation'},
                {weight: 7, mobileWeight: 6, label: 'Display Term'},
                {weight: 3, mobileWeight: 0, label: 'SNOMED CT ID'},
              ],
              rowKeyField: 'code',
              rowFormats: [
                {weight: 2, mobileWeight: 6, field: 'abbreviation.en'},
                {weight: 7, mobileWeight: 6, field: 'displayTerm.en'},
                {weight: 3, mobileWeight: 0, field: 'id'},
              ],
            }}
            header={TradenameHeader}
            detailView={TradenameDetail}
          />
        </Tab>
        <Tab eventKey={'disease'} title="Diseases">
          <ConceptsTable
            {...this.props}
            tableType={'disease'}
            selectedTable={selectedTable}
            selectedRowId={rowId}
            data={this.state.cvc.diseases}
            tableConfig={{
              headers: [
                {weight: 9, mobileWeight: 6, label: 'Display Term'},
                {weight: 3, mobileWeight: 6, label: 'SNOMED CT ID'},
              ],
              rowFormats: [
                {weight: 9, mobileWeight: 6, field: 'enDisplayName'},
                {weight: 3, mobileWeight: 6, field: 'id'},
              ],
            }}
            header={DiseaseHeader}
            detailView={DiseaseDetail}
          />
        </Tab>
        <Tab eventKey={'antigen'} title="Antigens">
          <ConceptsTable
            {...this.props}
            tableType={'antigen'}
            selectedTable={selectedTable}
            selectedRowId={rowId}
            data={this.state.cvc.antigens}
            tableConfig={{
              headers: [
                {weight: 9, mobileWeight: 6, label: 'Display Term'},
                {weight: 3, mobileWeight: 6, label: 'SNOMED CT ID'},
              ],
              rowFormats: [
                {weight: 9, mobileWeight: 6, field: 'enDisplayName'},
                {weight: 3, mobileWeight: 6, field: 'id'},
              ],
            }}
            header={AntigenHeader}
            detailView={AntigenDetail}
          />
        </Tab>
        <Tab eventKey={'lot'} title="Lot Lookup">
          <ConceptsTable
            {...this.props}
            tableType={'lot'}
            selectedTable={selectedTable}
            selectedRowId={rowId}
            data={this.state.cvc.lotData}
            tableConfig={{
              headers: [
                {weight: 2, mobileWeight: 6, label: 'Lot Number'},
                {weight: 8, mobileWeight: 6, label: 'Product'},
                {weight: 2, mobileWeight: 0, label: 'DIN'},
              ],
              rowFormats: [
                {weight: 2, mobileWeight: 6, field: 'lotNumber'},
                {weight: 8, mobileWeight: 6, field: 'brandName'},
                {weight: 2, mobileWeight: 0, field: 'din'},
              ],
            }}
            header={LotHeader}
            detailView={LotDetail}
          />
        </Tab>
        <Tab eventKey={'gtin'} title="GTIN Lookup">
          <ConceptsTable
            {...this.props}
            tableType={'gtin'}
            selectedTable={selectedTable}
            selectedRowId={rowId}
            data={this.state.cvc.gtins}
            tableConfig={{
              headers: [
                {weight: 2, mobileWeight: 6, label: 'GTIN'},
                {weight: 7, mobileWeight: 6, label: 'Product'},
                {weight: 3, mobileWeight: 0, label: 'Hierarchy'},
              ],
              rowFormats: [
                {weight: 2, mobileWeight: 6, field: 'gtin'},
                {weight: 7, mobileWeight: 6, field: 'brandName'},
                {weight: 3, mobileWeight: 0, field: 'productType'},
              ],
            }}
            header={GtinHeader}
            detailView={GtinDetail}
          />
        </Tab> */}
      </ResponsiveTabs>
    );
  }
}