import React, { useState, useEffect } from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import adminConfig from 'config/admin';
import GenericDisplayFields from 'components/pageItems/GenericDisplayFields';
import MosaicStructure from 'components/enhancers/MosaicStructure';
import { fieldsToList } from 'store/utils/adminHelpers';
import config, { viewConfig } from 'config/general';
import GenericHeader from 'components/pageItems/GenericHeader';
import styleIdentifiers from './detail.scss';

const styles = classNames.bind(styleIdentifiers);

const GenericStructure = MosaicStructure(GenericDisplayFields);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type DetailProps = StateProps & DispatchProps & OwnProps;

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

  const options = adminConfig?.adminSettings[params.resource];

  useEffect(() => {
    loadData({
      options,
      apiInput: { id: params.id },
    });
  }, [params.id]);

  const listFields = fieldsToList(options.model);

  return (
    <div className={styles('Detail', 'header')}>
      <GenericHeader
        title={options.title || detail?.data?.key}
        editAction={() => history.push(`/settings/${params.resource}/${detail.data._id}/edit`)}
      />
      <div className={styles('content')}>
        <GenericStructure
          transformedData={options.transformedData}
          scrollableColumns
          minWidth={config.widthDetailColumn}
          data={detail?.data}
          items={listFields}
          oneSection={listFields.length === 1}
        />
      </div>
    </div>
  );
};

export default Detail;
