import React, { useState } from 'react';
import Login from './login';
import OTP from './otp';
import Offers from './offers';

import { ToastContainer, toast } from 'react-toastify';
// import 'react-toastify/dist/ReactToastify.css';

type Props = {};

export default function Demo({}: Props) {
  const [layout, setLayout] = useState('login');

  const handleLogin = async () => {
    // console.log('>>>>>');
    // const response = await fetch('https://ipapi.co/json');
    // console.log('🚀 ~ file: demo.tsx:8 ~ handleLogin ~ response:', response);
    // const movies = await response.json();
    // console.log(movies);
    setLayout('otp');
  };

  const handleConfirm = async () => {
    setLayout('offers');
  };

  const handleClaim = async (text: any) => {
    await navigator.clipboard.writeText(text);
    toast('Copied to clipboard');
  };

  const renderLayout = () => {
    switch (layout) {
      case 'login':
        return <Login onLogin={handleLogin} />;
      case 'otp':
        return <OTP onConfirm={handleConfirm} />;
      case 'offers':
        return <Offers onClaim={handleClaim} />;
      default:
        return <Login onLogin={handleLogin} />;
    }
  };

  return (
    <div style={styles.container}>
      {renderLayout()}
      <ToastContainer />
    </div>
  );
}

const styles: any = {
  container: {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    height: '100%',
  },
};