import React, { useState } from 'react';
import { batch, useDispatch, useSelector } from 'react-redux';
import { fetchHiscores, updateUsername } from '../store/user/character';
import Spinner from './common/Spinner';
import Modal from './Modal';

const PLACEHOLDER_USERNAMES = [
    'zezima',
    'woox',
    'swampletics',
    'torvesta',
    'goodpker69',
    'limpwurt',
    'one kik rick',
    'slayermusiq1',
];

export default function ManageCharactersModal({ isOpen, setIsOpen }) {
    const characterState = useSelector(state => state.character);
    const [characterText, setCharacterText] = useState(characterState.username || '');
    const dispatch = useDispatch();

    const updateAndFetchHiscores = () => {
        batch(() => {
            dispatch(updateUsername(characterText));
            dispatch(
                fetchHiscores({
                    ...characterState,
                    username: characterText,
                })
            );
        });
    };

    const prompt = characterState.username
        ? 'If your display name has changed, update it below.'
        : "Enter your character's display name to automatically load your stats from hiscores:";

    return (
        <Modal
            isOpen={isOpen}
            setIsOpen={setIsOpen}
            onClose={() => {}}
            className='w-[26rem] shadow shadow-primary rounded-md bg-primary-alt'
        >
            <Modal.Header className='text-center small-caps tracking-wide text-xl text-accent font-semibold'>
                Manage character
            </Modal.Header>
            <Modal.Body className='text-primary text-sm'>
                <div className='m-2 mt-1'>{prompt}</div>
                <div className='m-2 mt-1 flex justify-around'>
                    <input
                        className='input-primary text-sm form-input w-40 ml-2'
                        onChange={e => {
                            setCharacterText(e.target.value);
                        }}
                        placeholder={PLACEHOLDER_USERNAMES[Math.floor(Math.random() * PLACEHOLDER_USERNAMES.length)]}
                        value={characterText}
                        onKeyPress={e => e.key === 'Enter' && updateAndFetchHiscores()}
                        type='text'
                    />
                    <button className='w-40 button-filled' type='button' onClick={updateAndFetchHiscores}>
                        {characterState.hiscoresCache.loading ? (
                            <span>
                                <Spinner />
                            </span>
                        ) : (
                            'Submit'
                        )}
                    </button>
                </div>
                <div className='my-1 flex justify-around'>
                    {characterState.hiscoresCache.error && (
                        <p className='text-error text-sm'>{characterState.hiscoresCache.error}</p>
                    )}
                </div>
            </Modal.Body>
        </Modal>
    );
}