import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

interface DemoProps {
    item?: any;
}

interface DemoState {
    items?: any;
}

class ListItem extends React.Component< DemoProps, DemoState > {
    render() {
        const classes = (this.props.item.id % 2 == 0 ? 'custom-card-rotate-right' : (this.props.item.id % 3 == 0 ? 'custom-card-rotate-left' : '')) + ' custom-card';

        return (
            <li>
                <mobiscroll.Card 
                    className={classes}
                    lang=" "
                    theme="ios" 
                    themeVariant="light"
                > 
                    <mobiscroll.CardHeader>
                        <mobiscroll.CardTitle>{this.props.item.title}</mobiscroll.CardTitle>
                        <mobiscroll.CardSubtitle>{this.props.item.desc}</mobiscroll.CardSubtitle>
                    </mobiscroll.CardHeader>
                    <mobiscroll.CardContent>
                        <img draggable="false" src={this.props.item.img} />
                    </mobiscroll.CardContent>
                </mobiscroll.Card> 
            </li>
        );
    }
}

class App extends React.Component< DemoProps, DemoState > {
    cycleStages:any;
    stages:any;
    constructor(props: DemoProps) {
        super(props);

        this.state = {
            items: [{
                id: 1,
                title: 'Best places to seek silence',
                desc: 'The Dhamma Giri, a vipassana meditation retreat.',
                img: 'https://img.mobiscroll.com/demos/card_1.png'
            }, {
                id: 2,
                title: 'Best animal adventure',
                desc: 'A young panda tests his climbing skills at the Chengdu Research Base.',
                img: 'https://img.mobiscroll.com/demos/card_2.png'
            }, {
                id: 3,
                title: 'Best places to test your survival skills',
                desc: 'A view across the Turnagain Arm on Alaska\'s Kenai Peninsula.',
                img: 'https://img.mobiscroll.com/demos/card_3.png'
            }, {
                id: 4,
                title: 'Most accessible destinations',
                desc: 'The impressive Mayan site of Chichén Itzá.',
                img: 'https://img.mobiscroll.com/demos/card_4.png'
            }, {
                id: 5,
                title: 'The world’s most extraordinary sleepovers',
                desc: 'Explore the azure depths with a stay at the Manta Resort\'s underwater room.',
                img: 'https://img.mobiscroll.com/demos/card_5.png'
            }]
        };
    }
    
    stages = [{
        percent: -20,
        action: (event: any, inst: any) => {
            inst.remove(event.target);
            return false;
        }
    }, {
        percent: 20,
        action: (event: any, inst: any) => {
            inst.remove(event.target);
            return false;
        }
    }];

    cycleStages = [{
        percent: -20,
        action: (event: any, inst: any) => {
            inst.move(event.target, 0);
            return false;
        }
    }, {
        percent: 20,
        action: (event: any, inst: any) => {
            inst.move(event.target, 0);
            return false;
        }
    }];
    
    render() {
        return (
            <div>
                <mobiscroll.Note color="primary">Swipe cards away left or right to clear stack.</mobiscroll.Note>
                <mobiscroll.Listview
                    className="mbsc-card-list custom-card-deck"
                    lang=" "
                    theme="ios" 
                    themeVariant="light"
                    itemType={ListItem} 
                    data={this.state.items}
                    stages={this.stages}
                    actionable={false}
                />
                <mobiscroll.Note color="primary">Swipe cards away for cyclic movement.</mobiscroll.Note>
                <mobiscroll.Listview
                    className="mbsc-card-list custom-card-deck"
                    lang=" "
                    theme="ios" 
                    themeVariant="light"
                    itemType={ListItem} 
                    data={this.state.items}
                    stages={this.cycleStages}
                    actionable={false}
                />
            </div>
        );
    }
}

<div id="content"></div>

.custom-card-deck {
    margin: 1em 0;
}

.custom-card-deck .mbsc-lv-sl-c {
    max-width: 500px;
    margin: 0 auto;
}

.custom-card-deck .mbsc-lv-v {
    padding-top: 88%;
    min-height: 390px;
}

.custom-card-deck .mbsc-lv-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.custom-card-deck .mbsc-lv-item.mbsc-lv-item-swiping {
    z-index: 10;
}

.custom-card-deck .custom-card-rotate-right {
    transform: rotate(1deg);
}

.custom-card-deck .custom-card-rotate-left {
    transform: rotate(-2deg);
}

.custom-card-deck .mbsc-card.custom-card {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}