import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import React, {useEffect, useState } from 'react';
import {useDispatch,useSelector} from 'react-redux'
import fetch from 'node-fetch';
import api from '../http/api';
import {changeUserAC} from "../redux/actions/index"
import axios from 'axios';
import Publish from '../components/common/Publish/Publish';
import { compileString } from 'sass';

const Home: NextPage = (props:any) => {
//異步請(qǐng)求的數(shù)據(jù)(客戶(hù)端渲染);
  const [name,setName]=useState<any>("")
  useEffect(()=>{
    (async()=>{
      const res:any =await axios({
        url:"https://api.apiopen.top/getSingleJoke?sid=28654780"
      })
      setName(res.result.name)
      console.log("客戶(hù)端獲取的數(shù)據(jù)",res);
      console.log("服務(wù)端注入的數(shù)據(jù)",props);
    })();
  },[])
//異步請(qǐng)求的數(shù)據(jù)(客戶(hù)端渲染);

  //狀態(tài)機(jī)內(nèi)部的數(shù)據(jù);
  const stateData:any = useSelector<any>(state=>{
    console.log("狀態(tài)機(jī)數(shù)據(jù)",state);
    return state
  })
  //狀態(tài)機(jī)內(nèi)部的數(shù)據(jù);

  //派發(fā)action修改狀態(tài)機(jī)內(nèi)部的數(shù)據(jù);
  const dispatch = useDispatch();
  const changeRedux=()=>{
    dispatch(changeUserAC("李海"))
  } 
  //派發(fā)action修改狀態(tài)機(jī)內(nèi)部的數(shù)據(jù);

  //調(diào)用封裝的axios獲取后臺(tái)數(shù)據(jù)
  const getData = async () => {
    const res:any = await api.dataManage.GetCollectionData();
    console.log('請(qǐng)求結(jié)果',res);
    alert(`請(qǐng)求結(jié)果${res.result.name}`)
  };
  //調(diào)用封裝的axios獲取后臺(tái)數(shù)據(jù)

  const compareEffect=async()=>{
    window.location.reload()
  }

  //saga攔截
  const goToSaga=()=>{
    dispatch(
      {
        type:'changeUserData',
        payload:'劉利'
      }
    )
  } 
  //saga攔截

  return (
    <>
          <div>
            <p>來(lái)自服務(wù)端注入預(yù)渲染的:{props.data.result.name}</p>
            <p>來(lái)自異步請(qǐng)求返回的:{name}</p>
            <p><button onClick={()=>compareEffect()}>對(duì)比服務(wù)端渲染和客戶(hù)端渲染效果</button></p>
            <p>來(lái)自Redux的數(shù)據(jù):{stateData.user.users}</p>
            <p><button onClick={()=>changeRedux()}>派發(fā)事件修改redux數(shù)據(jù)</button></p>
            <p><button onClick={()=>getData()}>調(diào)用封裝的axios獲取后臺(tái)數(shù)據(jù)</button></p>
            <p><button onClick={()=>goToSaga()}>通過(guò)saga中間件攔截后修改redux數(shù)據(jù)</button></p>
            <div style={{marginLeft:30,marginTop:30}}><Publish/></div>
          </div>
    </>
  );
}

export async function getServerSideProps() {
  const res = await fetch(`https://api.apiopen.top/getSingleJoke?sid=28654780`)
  const data = await res.json()
  return { props: { data } }
}
// export async function getStaticProps() {
//   const res = await fetch('...')
//   const posts = await res.json()
//   return {
//     props: {
//       return { props: { data } }
//     },
//   }
// }
export default Home