import React, { useState } from 'react';
import { useAppDispatch, useAppSelector } from '../app/hooks';
import {
    shortenUrl,
    selectShortUrl,
    selectUrlStatus,
    selectUrlError,
    clearShortUrl,
} from '../features/url/urlSlice';

const Home: React.FC = () => {
    /* component level state */
    const [longUrl, setLongUrl] = useState('');

    /* global state */
    const dispatch = useAppDispatch();

    const shortUrl = useAppSelector(selectShortUrl);
    const status = useAppSelector(selectUrlStatus);
    const error = useAppSelector(selectUrlError);

    /* methods */
    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter' && longUrl.trim() !== '') {
            dispatch(shortenUrl(longUrl));
        }
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-purple-100">
            <div className="text-center space-y-6">
                <h1 className="text-5xl text-orange-500 font-pacifico">minxa.lol</h1>
                <input
                type="text"
                placeholder="Enter your long URL here"
                value={longUrl}
                onChange={(e) => setLongUrl(e.target.value)}
                onKeyDown={handleKeyDown}
                className="w-80 p-3 rounded-md text-lg border border-gray-300 shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-400"
                />
            </div>
        </div>
    );
};

export default Home;