import { useState } from 'react';
import { __ } from '@wordpress/i18n';
import ReactSelect from 'react-select';
import logo from './givewp-logo.svg';
import usePostState from "../../hooks/usePostState";
import {reactSelectStyles, reactSelectThemeStyles} from "./styles/reactSelectStyles";
import './styles/index.scss';
import { EmotionStylesProvider } from '@givewp/admin/providers';
import {useDispatch} from '@wordpress/data';

/**
 * @since 4.3.0
 */
export type EntityOption = {
    label: string;
    value: number | string;
};

/**
 * @since 4.3.0
 */
type EntitySelectorProps = {
    id: string;
    label: string;
    options: EntityOption[];
    isLoading: boolean;
    emptyMessage: string;
    loadingMessage: string;
    onConfirm: (id: number | string) => void;
    buttonText?: string;
    disabled?: boolean;
};

/**
 * @since 4.3.0
 */
export default function EntitySelector({
    id,
    label,
    options,
    isLoading,
    emptyMessage,
    loadingMessage,
    onConfirm,
    buttonText = __('Confirm', 'give'),
    disabled = false,
}: EntitySelectorProps) {
    const [selected, setSelected] = useState<number | string | null>(null);
    const selectedOption = options.find((opt) => opt.value === selected);
    const {isSaving, isDisabled} = usePostState();

    const {savePost} = useDispatch('core/editor');

    return (
        <div className="givewp-entity-selector">
            <img className="givewp-entity-selector__logo" src={logo} alt="givewp-logo" />
            <div className="givewp-entity-selector__select">
                <label htmlFor={id} className="givewp-entity-selector__label">
                    {label}
                </label>

                <EmotionStylesProvider cacheKey="givewp-entity-selector">
                    <ReactSelect
                        name={id}
                        inputId={id}
                        value={selectedOption}
                        //@ts-ignore
                        onChange={(option) => setSelected(option?.value)}
                        options={options}
                        noOptionsMessage={() => <p>{emptyMessage}</p>}
                        loadingMessage={() => <>{loadingMessage}</>}
                        isLoading={isLoading}
                        theme={reactSelectThemeStyles}
                        styles={reactSelectStyles}
                        placeholder={isLoading ? loadingMessage : __('Select...', 'give')}
                    />
                </EmotionStylesProvider>
            </div>

            <button
                className="givewp-entity-selector__submit"
                type="button"
                disabled={isSaving || isDisabled || !selected}
                onClick={() => {
                    if (selected) {
                        onConfirm(selected);
                    }
                    savePost();
                }}
            >
                {buttonText}
            </button>
        </div>
    );
}