import LocationFinder, { Location, OpeningHours, OpeningHoursDaysDay, OpeningHoursDaysDaySlot } from '.';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { faker } from '@faker-js/faker';
import styles from './styles.json';
import React from 'react';

export default {
    title: 'Map/LocationFinder',
    component: LocationFinder
} as ComponentMeta<typeof LocationFinder>;

const createRandomLocation = (): Location => ({
    id: faker.datatype.uuid(),
    title: faker.company.bs(),
    city: faker.address.city(),
    street: faker.address.streetAddress(),
    position: {
        lat: parseFloat(faker.address.latitude(53.7, 50.6, 5)),
        lng: parseFloat(faker.address.longitude(7.5, 3.1, 5))
    },
    openingHours: createRandomOpeningHours(),
    image: [faker.image.animals()]
});

const createRandomOpeningHours = (): OpeningHours => ({
    days: {
        1: createRandomOpeningHoursDaysDay(),
        2: createRandomOpeningHoursDaysDay(),
        3: createRandomOpeningHoursDaysDay(),
        4: createRandomOpeningHoursDaysDay(),
        5: createRandomOpeningHoursDaysDay(),
        6: createRandomOpeningHoursDaysDay(),
        0: createRandomOpeningHoursDaysDay()
    }
});

const createRandomOpeningHoursDaysDay = (): OpeningHoursDaysDay => ({
    closed: faker.datatype.boolean(),
    slots: faker.helpers.arrayElement([
        [],
        [createRandomOpeningHoursDaysSlot()],
        [createRandomOpeningHoursDaysSlot()],
        [createRandomOpeningHoursDaysSlot(), createRandomOpeningHoursDaysSlot()]
    ])
});

const createRandomOpeningHoursDaysSlot = (): OpeningHoursDaysDaySlot => ({
    from: {
        hours: faker.datatype.number({ min: 7, max: 9 }),
        minutes: faker.datatype.number({ min: 0, max: 59 })
    },
    to: {
        hours: faker.datatype.number({ min: 10, max: 23 }),
        minutes: faker.datatype.number({ min: 0, max: 59 })
    }
});

const locations: Location[] = Array.from(Array(111).keys()).map(createRandomLocation);

const Template: ComponentStory<typeof LocationFinder> = (props) => {
    return (
        <LocationFinder
            {...props}
            locations={locations}
            classNameContainer="md:h-[800px]"
        />
    );
};

export const Default = Template.bind({});

export const Green = Template.bind({});
Green.args = {
    classNameListInput: 'rounded',
    classNameListItemTitle: 'text-black font-bold',
    classNameListItemStreet: 'text-black',
    styles: styles
};
