import React, { FC, useState }                   from 'react';
import { Meta, Story }                           from '@storybook/react';
import { Wrapper }                               from '../../../../dist';
import { Button }                                from '../button/button.component';
import { Description }                           from '../description/description.component';
import MarkerArAnimationJson                     from '../lottie/resourse/world-ar.json';
import DefaultMarkerArCard                       from '../lottie/resourse/world-ar-images/img_5.png';
import { MediaComponentPropsType, MediaContent } from '../media/media.component';
import { Card, CardPropsType }                   from './card.component';

export default { component: Card, title: 'GEENEE-UI/WorldAr' } as Meta;
type StoryArgsType = {
  [key: string]: any;
} & CardPropsType & MediaComponentPropsType

// eslint-disable-next-line react/function-component-definition
const CardUseCase: FC<StoryArgsType> = (props: StoryArgsType) => {
    const [ startToPlay, setStartToPlay ] = useState(false);
    return (
        <Card
            style={ { minWidth: 288 } }
            padding="md"
            fullHeight
            frame="solid-default"
            align="center"
            maxWidth="288px"
            mediaBefore
            media={ (
                <MediaContent
                    align="center"
                    ratio="full"
                    size="xl"
                    type="animation"
                    speed={ 0.75 }
                    placeholder={ DefaultMarkerArCard }
                    onClick={ () => {} }
                    loop
                    autoplay={ false }
                    play={ startToPlay }
                    playFrom={ props.playFrom }
                    url={ props.url }
                    style={ { width: 288, height: 288 } }
                />
            ) }
            onMouseEnter={ () => {
                setStartToPlay(true);
            } }
            onMouseLeave={ () => {
                setStartToPlay(false);
            } }
        >
            <Description margin="xs" weight="medium" lineHeight="lg" align="center">{ props.title }</Description>
            <Description margin="md">{ props.description }</Description>
            <Button margin="xs" uppercase>Get Started</Button>
        </Card>
    );
};