import React, { useState, useEffect } from 'react';
import { Form } from 'react-final-form';

// 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 WorkspaceDetail from 'components/pageItems/WorkspaceDetail';
import actionsBuilder from 'store/appActions';
import filter from 'lodash/filter';
import BackButton from 'components/items/BackButton';
import styleIdentifiers from './detailWorkspace.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type DetailWorkspaceProps = StateProps & DispatchProps & OwnProps;

const DetailWorkspace = (props: DetailWorkspaceProps) => {
  const {
    match: { params },
  } = props;
  // mapStateToProps
  const workspace = useSelector(
    (state: StoreState) => state.workspace.detail && state.workspace.detail.data,
  );

  const mine = useSelector((state: StoreState) => state.workspace.mine?.data);
  // Allow to dispatch actions
  const dispatch = useDispatch();
  const { workspaceDetail } = actionsBuilder(dispatch, ['detail']);

  useEffect(() => {
    if (params.id) {
      workspaceDetail({
        id: params.id,
      });
    }
  }, []);

  const isMine = workspace && mine && mine.filter(it => it._id === workspace._id).length >= 1;

  return (
    <div className={styles('detail-workspace')}>
      <div className={styles('container')}>
        <BackButton />
        {workspace && <WorkspaceDetail workspace={workspace} mine={isMine} />}
      </div>
    </div>
  );
};

export default DetailWorkspace;
