import { Send } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Button, Form } from 'react-bootstrap';
import '@/styles/CreatorDiscovery.scss';
import DiscoveryList from '../components/DiscoveryList';
import { useDispatch } from 'react-redux';
import { fetchDiscovery, fetchDiscoveryByIndividual, fetchDiscoveryByMode, resetStatus } from '../store/slices/discoverySlice';

export default function CreatorDiscovery() {
    const [search, setSearch] = useState('');
    const [searchMode, setSearchMode] = useState('');

    const dispatch = useDispatch();

    useEffect(() => {
        
        return () => {
            dispatch(resetStatus());
        };
    }, [dispatch]);

    const handleSubmit = (e) => {
        e.preventDefault();
        if(search === '') {
            return <div className='alert alert-danger'>Please enter a search query</div>;
        }
        switch (searchMode) {
            case 'hashtag':
                dispatch(fetchDiscoveryByMode({ keyword: search, mode: searchMode }));
                break;
            case 'trend':
                dispatch(fetchDiscoveryByMode({ keyword: search, mode: searchMode }));
                break;
            case 'individual':
                dispatch(fetchDiscoveryByIndividual({ criteria: search }));
                break;
            default:
                dispatch(fetchDiscovery(search));
                break;
        }
    };

    const handleModeChange = (mode) => {
        setSearchMode((prev) => (prev === mode ? null : mode));
    };

    return (
        <div className='creator-discovery-page'>
            <div className='top-search'>
                <div className='title'>Creator Discovery</div>
                <div className='description'>Select mode and discover new creators</div>
                <Form className='discovery-form' onSubmit={handleSubmit}>
                    <Form.Group>
                        <Form.Control
                            className='transparent-input'
                            type='text'
                            placeholder='Type a message'
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                        />
                    </Form.Group>
                    <div className='btn-tag-group' role='group' aria-label='Tag selection button group'>
                        <input
                            type='radio'
                            className='btn-check'
                            id='btncheck1'
                            name='searchMode'
                            autoComplete='off'
                            checked={searchMode === 'hashtag'}
                            onClick={() => handleModeChange('hashtag')}
                        />
                        <label className='rounded-pill btn btn-primary-subtle' htmlFor='btncheck1'>
                            #Hashtag
                        </label>

                        <input
                            type='radio'
                            className='btn-check'
                            id='btncheck2'
                            name='searchMode'
                            autoComplete='off'
                            checked={searchMode === 'trend'}
                            onClick={() => handleModeChange('trend')}
                        />
                        <label className='rounded-pill btn btn-primary-subtle' htmlFor='btncheck2'>
                            Trend
                        </label>

                        <input
                            type='radio'
                            className='btn-check'
                            id='btncheck3'
                            name='searchMode'
                            autoComplete='off'
                            checked={searchMode === 'individual'}
                            onClick={() => handleModeChange('individual')}
                        />
                        <label className='rounded-pill btn btn-primary-subtle' htmlFor='btncheck3'>
                            Individual
                        </label>
                    </div>
                    <Button className='rounded-pill submit-btn' type='submit'>
                        <Send />
                    </Button>
                </Form>
                <Button variant='outline-primary'>Upload from External Source</Button>
            </div>
            <DiscoveryList />
        </div>
    );
}