import React, { FC, useState }                   from 'react';
import { Meta, Story }                           from '@storybook/react';
import { Button }                                from '../button/button.component';
import { Description }                           from '../description/description.component';
import { Divider }                               from '../divider/divider.component';
import { Icon }                                  from '../icon/icon.component';
import MarkerArAnimationJson                     from '../lottie/resourse/marker-ar.json';
import DefaultMarkerArCard                       from '../lottie/resourse/marker-ar-images/MarkerAR007.png';
import ProjectCardAnimationJson                  from '../lottie/resourse/project.json';
import ProjectCardPlaceholder                    from '../lottie/resourse/project-images/Start_from_Scratch009.png';
import WorldArAnimationJson                      from '../lottie/resourse/world-ar.json';
import DefaultWorldArCard                        from '../lottie/resourse/world-ar-images/img_0.png';
import { MediaComponentPropsType, MediaContent } from '../media/media.component';
import { Tooltip }                               from '../tooltip/tooltip.component';
import { Wrapper }                               from '../wrapper/wrapper.component';
import { Card, CardPropsType }                   from './card.component';

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

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

DefaultCard.args = {
    placeholder: DefaultMarkerArCard, animationData: MarkerArAnimationJson, title: 'Title', description: 'Description', playFrom: 0
};

DefaultCard.bind({});
export const WorldAr: Story<StoryArgsType> = (args, context) => (
    <CardUseCase { ...args } />
);
WorldAr.bind({});
WorldAr.args = {
    placeholder: DefaultWorldArCard, animationData: WorldArAnimationJson, title: 'Title', description: 'Description', playFrom: 0
};

export const ProjectCard: Story<StoryArgsType> = (args, context) => (
    <CardUseCase { ...args } />
);
ProjectCard.bind({});
ProjectCard.args = {
    placeholder: ProjectCardPlaceholder, animationData: ProjectCardAnimationJson, title: 'Title', description: 'Description', playFrom: 0
};

export const AllCards: Story<StoryArgsType> = (args, context) => (
    <>
        { args.children }
    </>

);

AllCards.args = {
    children: (
        <Wrapper row>
            <WorldAr { ...{ ...WorldAr.args, ...{ margin: 'sm' } } } />
            <DefaultCard { ...{ ...DefaultCard.args, ...{ margin: 'sm' } } } />
            <ProjectCard { ...{ ...ProjectCard.args } } />
        </Wrapper>
    )
};

AllCards.bind({});

const CardWithIcon: FC<StoryArgsType> = (props: StoryArgsType) => (
    <Card
        row={ props.row }
        frame={ props.frame }
        padding={ props.padding }
        fullHeight
        mediaBefore={ props.mediaBefore }
        media={ (
            <Icon name={ props.iconName } size={ 56 } frame="default" rounded={ false } radius="lg" color="none" />
        ) }
    >

        <Wrapper padding="lg" style={ { paddingTop: 0, paddingBottom: 0 } }>
            <Wrapper padding="xs" style={ { paddingLeft: 0, paddingRight: 0 } }>
                <Description weight="bold">{ props.title }</Description>
                <Divider transparent margin="xs" />
                <Description margin="md">{ props.description }</Description>
                <Description
                    style={ { borderBottom: '1.5px solid' } }
                    uppercase
                    weight="semi-bold"
                    size="sm"
                >
                    Get Started
                </Description>
            </Wrapper>

        </Wrapper>

    </Card>
);

export const RowCard: Story<StoryArgsType> = (args, context) => (
    <CardWithIcon { ...args } />
);
RowCard.bind({});
RowCard.args = {
    title: 'Title', description: 'Description', iconName: 'support', row: true, frame: 'solid-default', padding: 'md', mediaBefore: false
};