import React from 'react';
import { useResource } from 'rest-hooks';
import { STATUS_DEFS } from '../../constants/parcelStatuses';
import ParcelResource from '../../resources/parcel';
import {
  beamlineFormatter,
  dateFormatter,
  getInstrumentName,
} from '../Investigation/utils';
import ParcelTable from './ParcelTable';
import styles from './MyParcelsSummary.module.css';
import { itemsFormatter } from '../../helpers';
import { useAllInvestigations } from '../../helpers/hooks';
import ParcelCondensedView from './ParcelCondensedView';

function getColumns(investigations) {
  return [
    { text: '', dataField: '_id', hidden: true, searchable: false },
    {
      dataField: 'condensedView',
      text: 'Parcel',
      isDummyField: true,
      formatter: (_, parcel, __, investigations) => {
        const investigation =
          investigations &&
          investigations.find((inv) => inv.id === parcel.investigationId);
        return (
          <ParcelCondensedView parcel={parcel} investigation={investigation} />
        );
      },
      formatExtraData: investigations,
      responsiveHeaderStyle: {
        xs: { width: '100%' },
        sm: { width: '100%' },
        md: { hidden: true },
        lg: { hidden: true },
      },
    },
    {
      text: 'Name',
      dataField: 'name',
      sort: true,
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
      },
    },
    {
      text: 'Proposal',
      dataField: 'investigationName',
      sort: true,
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
        md: { width: 150 },
        lg: { width: 150 },
      },
    },
    {
      text: 'Beamline',
      dataField: 'beamline',
      formatter: (_, parcel, __, investigations) => {
        const investigation =
          investigations &&
          investigations.find((inv) => inv.id === parcel.investigationId);
        return (
          <span style={{ fontWeight: 'bold' }}>
            {beamlineFormatter(investigation)}
          </span>
        );
      },
      onMatch: (searchText, _, parcel, investigations) => {
        const investigation =
          investigations &&
          investigations.find((inv) => inv.id === parcel.investigationId);
        const beamline = investigation && getInstrumentName(investigation);
        return !!beamline && beamline.toLowerCase().includes(searchText);
      },
      formatExtraData: investigations,
      sort: true,
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
        md: { width: 100 },
        lg: { width: 100 },
      },
    },
    {
      text: 'Start date',
      dataField: 'startDate',
      formatter: (_, parcel, __, investigations) => {
        const investigation =
          investigations &&
          investigations.find((inv) => inv.id === parcel.investigationId);
        return investigation ? dateFormatter(investigation.startDate) : '';
      },
      formatExtraData: investigations,
      sort: true,
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
        md: { width: 110 },
        lg: { width: 110 },
      },
    },
    {
      text: 'Number of items',
      dataField: 'items',
      formatter: itemsFormatter,
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
        md: { width: 180 },
        lg: { width: 180 },
      },
    },
    {
      text: 'Status',
      dataField: 'status',
      formatter: (status) => STATUS_DEFS[status].label,
      sort: true,
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
      },
    },
    {
      text: 'Dangerous goods',
      dataField: 'containsDangerousGoods',
      sort: true,
      formatter: (containsDangerousGoods) =>
        containsDangerousGoods ? (
          <span className={styles.dangerous}>YES</span>
        ) : (
          'NO'
        ),
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
        md: { width: 150 },
        lg: { width: 150 },
      },
    },
    {
      text: 'After experiment',
      dataField: 'returnAddress',
      formatter: (returnAddress) =>
        returnAddress ? (
          'Ship back'
        ) : (
          <span className={styles.dangerous}>Destroy</span>
        ),
      sort: true,
      responsiveHeaderStyle: {
        xs: { hidden: true },
        sm: { hidden: true },
        md: { width: 150 },
        lg: { width: 150 },
      },
    },
  ];
}

function MyParcelsSummary() {
  const parcels = useResource(ParcelResource.listShape(), {});
  const { investigations } = useAllInvestigations();

  return (
    <ParcelTable
      columns={getColumns(investigations)}
      parcels={parcels}
      investigations={investigations}
    />
  );
}

export default MyParcelsSummary;
