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

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

// Import actions here
import bookingActions from 'store/booking/actions';
import messagerieActions from 'store/messagerie/actions';

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import { pushRoute } from 'store/utils/routes';
import app from 'store/app';
import ProjectModal from 'components/items/ProjectModal';
import styleIdentifiers from './bookingCard.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type BookingCardProps = StateProps & DispatchProps & OwnProps;

const BookingCard = (props: BookingCardProps) => {
  const { type, booking, history } = props;

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

  const profile = useSelector(
    (state: StoreState) => state.account.profile && state.account.profile.data,
  );

  // Allow to dispatch actions
  const dispatch = useDispatch();

  const deleteItem = data => dispatch(bookingActions.delete.request.action(data));
  const dialogShow = data => dispatch(app.actions.dialog.show.action(data));

  const status = booking?.status;

  const deleteBooking = () => {
    dialogShow({
      id: 'custom',
      children: (
        <ProjectModal
          title="items.bookingItem.delete.title"
          message={
            type === 'pro'
              ? 'items.bookingItem.delete.messagePro'
              : 'items.bookingItem.delete.message'
          }
          buttonRight="Confirm"
          actionRight={() => {
            deleteItem({
              _id: booking._id,
              success: 'items.bookingItem.delete.success',
            });
          }}
        />
      ),
    });
  };
  const seeDetail = () => {
    if (!booking || !booking.workspace) return;

    history.push(
      pushRoute('detailWorkspace.id', lg, {
        id: booking.workspace._id,
      }),
    );
  };

  const workspace = booking.workspace;

  let info;
  let extra;

  const title = `${moment(booking.slot.startDate).format('DD-MM-YYYY')} - ${moment(
    booking.slot.endDate,
  ).format('DD-MM-YYYY')}`;

  const subtitle = `${booking.slot.startTime} - ${booking.slot.endTime}`;

  if (type === 'user') {
    info = workspace && workspace.place && workspace.place.formattedAddress;
    extra = `• ${booking.capacity} Personnes`;
  }
  if (type === 'pro') {
    info = `${booking.owner?.firstName} ${booking.owner?.lastName}`;
    extra = `• ${booking.owner?.email}`;
  }

  let userId = workspace && workspace.createdBy;
  if (type === 'pro') {
    userId = booking.ownerId;
  }
  console.log('userId', userId);

  const goDiscussion = () => {
    history.push({
      pathname: pushRoute('mailBox.id', lg, { id: userId }),
    });
  };

  console.log('booking', booking);

  return (
    <div className={styles('booking-card')} name={booking._id}>
      <div className={styles('info-container')}>
        {status && (
          <div className={styles('status', status)}>
            <TextItem path={`items.bookingItem.status.${status}`} />
          </div>
        )}
        <div className={styles('title')}>
          <TextItem path={title} />
        </div>
        <div className={styles('title2')}>
          <TextItem path={subtitle} />
        </div>

        <div className={styles('names-container')}>
          <TextItem path={info} />
        </div>
        <div className={styles('info-container')}>
          <TextItem path={extra} />
        </div>
      </div>
      <div className={styles('button-container')}>
        {/* //mutation bookingsDeleteOne doesn't exist yet */}
        {/* <ProjectButton label="general.actions.delete" color="border-primary" action={deleteBooking} /> */}
        {type === 'user' && (
          <ProjectButton
            noMargin
            label="items.bookingItem.actions.detail"
            color="border-secondary"
            action={seeDetail}
          />
        )}
        {profile._id !== userId && (
          <ProjectButton
            noMargin={type === 'pro'}
            label="items.bookingItem.actions.contact"
            color="secondary"
            customClassName={styles('button')}
            action={goDiscussion}
          />
        )}
        {/* <ProjectButton
          label="items.bookingItem.actions.delete"
          color="border-primary"
          action={deleteBooking}
        /> */}
      </div>
    </div>
  );
};

export default BookingCard;
