import { useEffect } from 'react';
import { useDetectDeviceType } from '../../states/DeviceTypeState';
import DownloadPage from '../DownloadPage'
import { detectDeviceType } from '../../utils/DetectDeviceType';
import { Spin } from 'antd';
import Layout from '../../components/layout/Layout';
import { ExternalRedirect } from '../../utils/ExternalRedirect';
import {  Links } from '../../../data.json';
import { useLocation } from 'react-router-dom';
import { useSendTopicName } from '../../apis/view';

const Download = () => {
  const { DeviceType, setDeviceType }: any = useDetectDeviceType();
  const location = useLocation();

  const params = new URLSearchParams(location.search);
  const src = params.get('src');
  const {mutate,} = useSendTopicName()
  useEffect(() =>{
    mutate(
      {
        "topic_name": src,
     "project_name": "zaker"
     }
    )
  },[])

  useEffect(() => {
    setDeviceType(detectDeviceType());
  }, [setDeviceType]);

  if (!DeviceType) {
    return <Spin />;
  }
  return (
    <div className='Download'>
      {
        DeviceType === 'desktop' ? (
          <Layout>
            <DownloadPage /> 
          </Layout>
        ) : (
        <ExternalRedirect url={DeviceType === 'ios' ? Links.apple_store_link : Links.google_play_link} />
        )
      }
    </div>
  )
}

export default Download