import { useState, useEffect, useCallback } from 'react';
import { LocationDisplay, LocationInput, LocationView, getCoords, debounce, isValueACoordinate, Flex } from '@pega/cosmos-react-core';
import { PinContent } from './Location.mocks';
import { MAPS_STORAGE_KEY } from './MapsProvider.mock';
export default {
    title: 'Core/Location',
    component: LocationInput,
    argTypes: {
        apiKey: { control: { type: 'text' } }
    },
    args: {
        apiKey: window.sessionStorage.getItem(MAPS_STORAGE_KEY)
    }
};
export const LocationDemo = (args) => {
    const [value, setValue] = useState('Boston, MA');
    const [locationObj, setLocationObj] = useState({
        latitude: 42.3601,
        longitude: -71.0589
    });
    const handleClick = ({ latitude, longitude }) => {
        setLocationObj({ latitude, longitude });
    };
    return (<LocationInput defaultToCurrentLocation={args.defaultToCurrentLocation} onlyCoordinates={args.onlyCoordinates} value={value} label={args.label} labelHidden={args.labelHidden} info={args.info} onChange={inputValue => {
            setValue(inputValue);
        }} onSelect={selectedValueObj => {
            if (args.onlyCoordinates || !selectedValueObj.name) {
                setValue(`${selectedValueObj.latitude}, ${selectedValueObj.longitude}`);
            }
            else if (selectedValueObj.address) {
                setValue(`${selectedValueObj.name}, ${selectedValueObj.address}`);
            }
            else {
                setValue(selectedValueObj.name);
            }
            if (selectedValueObj.latitude && selectedValueObj.longitude) {
                setLocationObj({
                    latitude: selectedValueObj.latitude,
                    longitude: selectedValueObj.longitude
                });
            }
        }} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} map={{
            location: locationObj,
            zoomLevel: args.zoomLevel,
            onClick: handleClick,
            height: '25rem'
        }}/>);
};
LocationDemo.args = {
    defaultToCurrentLocation: false,
    label: 'Location',
    labelHidden: false,
    info: undefined,
    zoomLevel: 13,
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    onlyCoordinates: false
};
LocationDemo.argTypes = {
    defaultToCurrentLocation: { control: { type: 'boolean' } },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    zoomLevel: { control: { type: 'number' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } },
    onlyCoordinates: { control: { type: 'boolean' } }
};
export const MultiLocationDemo = (args) => {
    const [pins, setPins] = useState([
        {
            latitude: 50.026617,
            longitude: 19.952037,
            content: <PinContent key='50.026617, 19.952037' content='50.026617, 19.952037' mockFetching/>
        },
        {
            latitude: 50.027849,
            longitude: 19.93081,
            content: <PinContent key='50.027849, 19.93081' content='50.027849, 19.93081'/>
        },
        {
            latitude: 50.051263,
            longitude: 19.929474,
            content: <PinContent key='50.051263, 19.929474' content='50.051263, 19.929474'/>
        }
    ]);
    const [value, setValue] = useState('');
    useEffect(() => {
        if (!pins[args.hightlightedPinIndex])
            return;
        setPins(prev => {
            prev.forEach(p => {
                p.selected = false;
            });
            prev[args.hightlightedPinIndex].selected = true;
            return [...prev];
        });
    }, [args.hightlightedPinIndex]);
    return (<Flex container={{ direction: 'column', gap: 1 }}>
      <LocationInput value={value} onChange={setValue} onSelect={selected => {
            if (selected.latitude && selected.longitude) {
                const pin = {
                    latitude: selected.latitude,
                    longitude: selected.longitude
                };
                setPins(prev => [...prev, pin]);
            }
        }}/>
      <LocationView drawRoute={args.drawRoute} pins={pins} centerMapOnChange/>
    </Flex>);
};
MultiLocationDemo.args = {
    drawRoute: true,
    hightlightedPinIndex: 0
};
MultiLocationDemo.argTypes = {
    drawRoute: { control: { type: 'boolean' } },
    hightlightedPinIndex: { control: { type: 'number' } }
};
export const LocationInputDemo = (args) => {
    const [value, setValue] = useState('');
    return (<LocationInput defaultToCurrentLocation={args.defaultToCurrentLocation} label={args.label} labelHidden={args.labelHidden} info={args.info} value={value} onChange={inputValue => {
            setValue(inputValue);
            args.onChange?.(inputValue);
        }} onSelect={selectedValueObj => {
            if (isValueACoordinate(`${selectedValueObj.latitude}, ${selectedValueObj.longitude}`)) {
                setValue(selectedValueObj.name
                    ? `${selectedValueObj.name}, ${selectedValueObj.address}`
                    : `${selectedValueObj.latitude}, ${selectedValueObj.longitude}`);
                args.onSelect?.(selectedValueObj);
            }
        }} additionalInfo={args.showAdditionalInfo
            ? args.additionalInfo ?? {
                content: 'Please enter your location'
            }
            : undefined} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
};
LocationInputDemo.args = {
    defaultToCurrentLocation: false,
    label: 'Location',
    labelHidden: false,
    info: 'Enter some location',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false
};
LocationInputDemo.argTypes = {
    defaultToCurrentLocation: { control: { type: 'boolean' } },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } },
    showAdditionalInfo: { control: { type: 'boolean' } }
};
export const LocationViewDemo = (args) => {
    const [coords, setCoords] = useState();
    const [loading, setLoading] = useState(false);
    const resolveCoords = useCallback(debounce(async (location) => {
        if (location) {
            setLoading(true);
            setCoords(await getCoords(location));
            setLoading(false);
        }
        else {
            setCoords(undefined);
        }
    }, 500), []);
    useEffect(() => {
        resolveCoords(args.location);
    }, [args.location]);
    return (<LocationView pins={coords ? [coords] : []} centerMapOnChange={args.centerMapOnChange} zoomLevel={args.zoomLevel} height={args.height} onClick={setCoords} loading={loading}/>);
};
LocationViewDemo.args = {
    location: '',
    centerMapOnChange: true,
    zoomLevel: 13,
    height: '25rem'
};
LocationViewDemo.argTypes = {
    location: { control: { type: 'text' } },
    centerMapOnChange: { control: { type: 'boolean' } },
    zoomLevel: { control: { type: 'number' } },
    height: { control: { type: 'text' } }
};
export const LocationDisplayDemo = (args) => (<LocationDisplay value={args.value} zoomLevel={args.zoomLevel} height={args.height} variant={args.variant} displayText={args.displayText}/>);
LocationDisplayDemo.args = {
    value: 'current',
    displayText: 'Come visit Boston!',
    zoomLevel: 13,
    height: '25rem',
    variant: 'text-map'
};
LocationDisplayDemo.argTypes = {
    value: { control: { type: 'text' } },
    zoomLevel: { control: { type: 'number' } },
    height: { control: { type: 'text' } },
    variant: { options: ['text-map', 'map', 'text'], control: { type: 'select' } },
    displayText: { control: { type: 'text' } }
};
//# sourceMappingURL=Location.stories.jsx.map