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

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

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import ListItems from 'components/items/ListItems';
import Amount from 'components/items/Amount';
import Quantity from 'components/items/Quantity';
import { pushRoute } from 'store/utils/routes';
import workspace from 'store/workspace';
import styleIdentifiers from './workspaceCard.scss';

// assets
import star from './assets/star.svg';
import likeIcon from './assets/like.svg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type WorkspaceCardProps = StateProps & DispatchProps & OwnProps;

const WorkspaceCard = (props: WorkspaceCardProps) => {
  const {
    customClassName,
    containerClassName,
    item,
    noPadding,
    liked,
    view,
    history,
    location: { search },
  } = props;

  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const highlight = useSelector((state: StoreState) => state.workspace.highlight);
  // Allow to dispatch actions
  const dispatch = useDispatch();
  const setHighlight = data => dispatch(workspace.actions.highlight.action(data));

  const action = type => {
    if (type === 'edit') {
      history.push(pushRoute('editWorkspace.id', lg, { id: item._id }));
    } else if (type === 'detail') {
      const route = pushRoute('detailWorkspace.id', lg, { id: item._id });
      history.push(route, search);
    } else if (type === 'info') {
      const route = pushRoute('detailWorkspace.id', lg, { id: item._id });
      history.push(route);
    } else if (type === 'calendar') {
      history.push({
        pathname: pushRoute('editWorkspace.id', lg, { id: item._id }),
        search: '?tab=calendar',
      });
    } else if (type === 'booking') {
      history.push(pushRoute('detailWorkspaceBookings.id', lg, { id: item._id }));
    } else {
      console.log('TODO: action', type);
    }
  };

  if (!item) return false;

  useEffect(() => {
    if (highlight === item._id) {
      setTimeout(() => {
        setHighlight('');
      }, 4000);
    }
  }, [highlight]);

  return (
    <div
      className={styles(
        'workspace-card',
        noPadding && 'no-padding',
        highlight === item._id && 'highlight',
        customClassName,
      )}
      name={item._id}
    >
      <div className={styles('container', containerClassName)}>
        {liked && <img src={likeIcon} alt="like" className={styles('like-btn')} />}
        <div className={styles('image')}>
          {item.mainImages && <img src={item.mainImages.main.small} alt="card-asset" />}
        </div>
        <div className={styles('content-wrapper')}>
          <div className={styles('content')}>
            <h3 className={styles('medium-text')}>
              {`${item.title} - `}
              <TextItem path="lists.workspaceType" item={item.workspaceType} />
            </h3>
            {item?.address && (
              <div className={styles('localisation')}>
                {`${item.address.city}, ${item.address.country}`}
                {item.dist?.calculated >= 0 && (
                  <span className={styles('distance')}>
                    <span>{' ('}</span>
                    <Quantity value={item.dist?.calculated / 1000} fixed="0" suffix="km" />
                    <span>)</span>
                  </span>
                )}
              </div>
            )}
            {item.maxCapacity && (
              <div className={styles('capacity')}>
                <TextItem path="$num personne(s)" replace={{ num: item.maxCapacity }} />
              </div>
            )}

            {item.score && (
              <div className={styles('score')}>
                <img src={star} className={styles('icon')} alt="" />
                <TextItem path={item.score} />
              </div>
            )}
            {item.finalPrice && (
              <div className={styles('price', 'green', 'bold')}>
                <Quantity suffix="€/h" value={item.finalPrice} />
              </div>
            )}
          </div>

          <div className={styles('button-wrapper')}>
            {/* USER ACTIONS */}
            {view === 'home' && (
              <>
                <ProjectButton
                  noMargin
                  label="items.workspaceItem.moreInfo"
                  color="secondary"
                  customClassName={styles('button')}
                  action={() => action('info')}
                />
                <ProjectButton
                  label="items.workspaceItem.book"
                  color="primary"
                  customClassName={styles('button')}
                  action={() => action('detail')}
                />
              </>
            )}

            {/* PRO ACTIONS */}
            {view === 'pro' && (
              <div>
                <ProjectButton
                  noMargin
                  label="items.workspaceItem.seeBookings"
                  color="secondary"
                  customClassName={styles('button')}
                  action={() => action('booking')}
                />
                <ProjectButton
                  label="items.workspaceItem.calendar"
                  color="border-primary"
                  customClassName={styles('button')}
                  action={() => action('calendar')}
                />
                <ProjectButton
                  label="items.workspaceItem.detail"
                  color="primary"
                  customClassName={styles('button')}
                  action={() => action('detail')}
                />
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default withRouter(WorkspaceCard);
