import React, { memo } from 'react';
import { connect } from 'react-redux';
import {
  getVideoTable,
  getVideoTableIsLoading,
  getVideoTableIsLoadingFailed,
  updateVideoFetchSaga,
  removeVideoFetchSaga,
} from '@/pages/home/_redux/get-video-module';
import { Action } from '@/services/redux/_types';
// import { FontSizeType } from '@/_components/text';
// import { Table } from '../make-table';
// import { AddVideoForm } from './_components/add-video-form';
// import { EditVideoForm } from './_components/edit-video-form';
import { Table } from '../table';

type IProps = {
  videoData: Array<any>;
  onShowModal(...title: any): void;
  onCloseModal(): void;
  isLoading: boolean;
  isError: boolean | string;
  updateVideo: any;
  removeVideo: Action<string>;
};

const Wrapper = memo(
  ({
    videoData,
    onShowModal,
    onCloseModal,
    isLoading,
    isError,
    updateVideo,
    removeVideo,
  }: IProps) => {
    const onAddNewVideo = () => {
      // onShowModal(
      //   'Добавить видео',
      //   <AddVideoForm onCloseModal={onCloseModal} dispatch={dispatch} />,
      // );
    };

    const onEditVideo = id => {
      console.log('Edit', id);
      // const finded = video.find(elem => elem.id === id);
      // onShowModal(
      //   'Редактировать',
      //   <EditVideoForm
      //     onCloseModal={onCloseModal}
      //     dispatch={dispatch}
      //     editFormData={finded}
      //   />,
      // );
    };

    const onRemoveVideo = id => {
      removeVideo(id);
    };

    return (
      <Table
        data={videoData}
        onAddNew={onAddNewVideo}
        onEdit={onEditVideo}
        onRemove={removeVideo}
      />
    );
  },
);

const mapStateToProps = state => {
  return {
    videoData: getVideoTable(state),
    isLoading: getVideoTableIsLoading(state),
    isError: getVideoTableIsLoadingFailed(state),
  };
};

// const mapDispatchToProps = () => ({
//   updateVideo: updateVideoFetchSaga,
//   removeVideo: removeVideoFetchSaga,
// });

export const VideoPage = connect(
  mapStateToProps,
  {
    removeVideo: removeVideoFetchSaga,
  },
)(Wrapper);