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 } from '../store/slices/discoverySlice';

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

    const dispatch = useDispatch();

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

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Form submitted');
        dispatch(fetchDiscovery(search));
    };

    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='checkbox' className='btn-check' id='btncheck1' autocomplete='off' />
                        <label className='rounded-pill btn btn-primary-subtle' for='btncheck1'>
                            #Hashtag
                        </label>

                        <input type='checkbox' className='btn-check' id='btncheck2' autocomplete='off' />
                        <label className='rounded-pill btn btn-primary-subtle' for='btncheck2'>
                            Trend
                        </label>

                        <input type='checkbox' className='btn-check' id='btncheck3' autocomplete='off' />
                        <label className='rounded-pill btn btn-primary-subtle' for='btncheck3'>
                            Indivisual
                        </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>
    );
}