import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';

import { withRouter } from 'react-router-dom';
import qs from 'query-string';
import moment from 'moment';
import WorkspaceCard from 'components/listItems/WorkspaceCard';
import Quantity from 'components/items/Quantity';
import styleIdentifiers from './summaryCard.scss';

// assets
import itemOne from './assets/item-1.jpg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type SummaryCardProps = StateProps & DispatchProps & OwnProps;

const SummaryCard = (props: SummaryCardProps) => {
  const { location, workspace } = props;

  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);

  // const currentSearch = useSelector(
  //   (state: StoreState) => state.workspace.list && state.workspace.list.requestData,
  // );
  const currentOrder = useSelector((state: StoreState) => state.order.current?.data);

  if (!currentOrder?.lines?.length) return false;

  const { finalPrice, subTotalPrice, vatPrice } = currentOrder;
  const line = currentOrder?.lines && currentOrder?.lines[0];

  const { finalPrice: linePrice, quantity } = line;

  const renderPrice = () => {
    return (
      <div className={styles('summary-card-detail')}>
        <div className={styles('item')}>
          <div className={styles('left-part')}>
            <Quantity value={linePrice} suffix="€/h" />
            <span>&nbsp;</span>
            <TextItem path="x" />
            <span>&nbsp;</span>
            <TextItem path={quantity} />
            <span>&nbsp;</span>
            <TextItem path="pages.checkout.cardSummary.hours" />
          </div>
          <Quantity value={finalPrice} />
        </div>

        <div className={styles('separator')} />
        <div className={styles('item')}>
          <TextItem tag="div" path="pages.checkout.cardSummary.priceNoVat" />
          <Quantity className={styles('price')} value={subTotalPrice} suffix="€" />
        </div>
        <div className={styles('item')}>
          <TextItem tag="div" path="pages.checkout.cardSummary.vat" />
          <Quantity className={styles('price')} value={vatPrice} suffix="€" />
        </div>
        <div className={styles('item')}>
          <div className={styles('left-part')}>
            <TextItem path="pages.checkout.cardSummary.total" />
          </div>
          <Quantity className={styles('price')} value={finalPrice} suffix="€" />
        </div>
      </div>
    );
  };

  return (
    <div className={styles('summary-card')}>
      <WorkspaceCard
        noPadding
        item={workspace}
        customClassName={styles('item')}
        containerClassName={styles('item-container')}
      />

      {renderPrice()}
    </div>
  );
};

export default withRouter(SummaryCard);
