import React, { useEffect, useRef,useState } from 'react';
import { connect } from 'react-redux';
import { TreeSelect, Tree, Form, Button, Popover, Tag, Switch, Input, Row, Col } from '@douyinfe/semi-ui';
import Container from "./container";


const VideoCard = ({ data, pageSize ,showHeader, key,videoPlay,mould}) => {


   let span = 8
   let rowsCount = 2
   if (pageSize === 1) {
      span = 24
      rowsCount = 1
   }
   if (pageSize === 4) {
      span = 12
      rowsCount = 2
   }
   if (pageSize == 6) {
      span = 8
      rowsCount = 2
   }
   if (pageSize == 12) {
      span = 6
      rowsCount = 3
   }
   let cheight = Math.floor(100 / rowsCount) + "%"

   return (
      <>
         <Col id={'video'+data.key} key={key} span={span} style={{ height: cheight, }}>
            <Container
               videoObj={data}
               pageSize={pageSize}
               showHeader={showHeader}
               videoPlay={videoPlay}
               mould={mould}
            />
         </Col>
      </>
   )
}

function mapStateToProps (state) {
   const { auth } = state;
   return {
      user: auth.user,
   };
}

export default connect(mapStateToProps)(VideoCard)