import React, { useEffect, useState } from 'react';
import { Dimensions, View } from 'react-native';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import Home from './screens/Home/Home';
import ProvideFeedback from './screens/ProvideFeedback/ProvideFeedback';
import SelectLanguage from './screens/SelectLanguage/SelectLanguage';
import { setLanguage, setSettingsData } from './store/actions';
import { persistor, store } from './store/store';
import axios from 'axios'
import Splash from './screens/Splash/Splash';
import Ending from './screens/Ending/Ending';
const FloatingRatingWrapped = ({ lang}) => {
  const [step, setStep] = useState(1);
  const [newTypes, setnewTypes] = useState([])
  const [data, setdata] = useState(null)
  const languageResource = useSelector(
    state => state.resourcesReducer.resource,
  );
  const settingsData = useSelector(
    state => state.resourcesReducer.settingsData,
  );
  const dispatch = useDispatch();
  useEffect( () => {
    // dispatch(setLanguage(lang));
    // axios.get('https://demo2304211.mockable.io/getApi',{
    //   method: 'GET',
    //   headers: {
    //     Pragma: 'no-cache',
    //     'Cache-Control': 'no-cache, no-store, max-age=0, must-revalidate',
    //   },
    // }).then((res)=>{ 
    //   console.log(res)
    //   dispatch(setSettingsData(res.data))
    // }).catch((err) =>{ 
    //   console.log(err)
    // })

    // checkapp();

  }, [lang]);

  // const checkapp = () => {
  //   axios.get('https://demo2304211.mockable.io/getConfig/mobile/',{
  //     method: 'GET',
  //     headers: {
  //       Pragma: 'no-cache',
  //       'Cache-Control': 'no-cache, no-store, max-age=0, must-revalidate',
  //     },
  //   }).then((res)=>{ 
  //     console.log(res.data.data,"res.data.dat")
  //     console.log(res,"config")
  //     setdata(res.data.data)
  //     dispatch(setSettingsData(res.data.data))
  //   }).catch((err) =>{ 
  //     console.log(err)
  //   })
  // }

  useEffect(() => {
    console.log(settingsData,"settingsData")
      // if(settingsData?.audio ) {
        newTypes.push({
          id:1,
          title:languageResource.Audio
        },{
          id:2,
          title:languageResource.Video
        },{
          id:3,
          title:languageResource.Selfie
        },{
          id:4,
          title:languageResource.Text
        })
        console.log(newTypes,"newTypes")
      // }
      // else {
      //   console.log("ye chlaa")
      // }
  }, [settingsData])
  

  return (
    <View
      style={{
        position: 'absolute',
        top: 0,
        bottom: 0,
        zIndex: 30000,
        alignSelf: 'flex-end',
      }}>
      {step === 1 ? (
        <Home lang={lang} onPressIcon={() => setStep(2)} />
      )
      // : step === 2 ? (
      //   <Splash
      //     onSplashEnd={() => setStep(3)} 
      //     lang={lang}
      //     onClose={() => setStep(1)}
      //   />
      // )
       : step === 2 ? (
        <SelectLanguage
          onLanguageSelect={() => setStep(3)}
          lang={lang}
          onClose={() => setStep(1)}
        />
      ): step === 3 ? (
        <ProvideFeedback onClose={() => setStep(1)} lang={lang} onSubmit={() => setStep(4)} data={newTypes && newTypes}/>
      ): step === 4 ?  ( 
        <Ending
        lang={lang}
        onClose={() => setStep(1)}
      />
       ) : null}
    </View>
  );
};

const FloatingRating = (props) => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <FloatingRatingWrapped {...props} />
      </PersistGate>
    </Provider>
  );
};

export { FloatingRating };
