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 GenericHeader from 'components/pageItems/GenericHeader';
import styleIdentifiers from './detail.scss';
import Instagram from '../Instagram';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type DetailProps = StateProps & DispatchProps & OwnProps;

const Detail = (props: DetailProps) => {
  const {
    history,
    match: { params },
  } = props;

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

  const type = params && params.type;

  function handleContent() {
    if (!type) return 'No Type Found';
    if (type === 'instagram') return <Instagram />;
    return 'No Config Found';
  }

  return (
    <div className={styles('detail')}>
      <GenericHeader title="Instagram" />
      <div className={styles('content', 'padding')}>{handleContent()}</div>
    </div>
  );
};

export default Detail;
