import React, {Component} from 'react';
import {Layout, Card, Button, Avatar, Spin, Icon} from 'antd';
import lo from '../../../images/lo.png'
import './index.css'
import {graphqlUrl} from "../../../config";
import {SHOW_ALL_CASE} from "../../../gql";
import {FormattedMessage} from 'react-intl';
import {request} from 'graphql-request'

const {Content} = Layout;
const {Meta} = Card;

class CaseShow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            examplesIoobot: [],
            examplesOthers: []
        }
    }

    componentWillMount() {
        this._isMounted = true;
        request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
                let cases = data.case_by_props;
                console.log(cases);
                let examplesIoobot = cases.filter(case1 => case1.user_id.id === 'ioobot');
                let examplesOthers = cases.filter(case2 => case2.user_id.id !== 'ioobot');
                if (this._isMounted) {
                    this.setState({
                        examplesIoobot,
                        examplesOthers
                    })
                }
            }
        )
    }

    componentWillUnmount() {
        this._isMounted = false;
    }


    render() {
        return (
            <div id="example-show">
                <Layout style={{padding: '24px', minHeight: '300px'}}>
                    <Content className="content">
                        <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage id='scan and use'/>
                        </div>
                        <div>
                            <div className={'schema-name'}><FormattedMessage id='ioobot case'/></div>
                            <div className="caseAllShow">
                                {
                                    this.state.examplesIoobot.length === 0 ?
                                        <Spin/>
                                        :
                                        this.state.examplesIoobot.map((item, index) => (
                                            <span key={index} style={{padding: '10px 0'}}>
                                        <Card
                                            key={index}
                                            style={{width: 300}}
                                            cover={<div className='cover-div'><img className='cover-img' src={item.img}
                                                                                   alt={item.title + '' + item.description}/>
                                            </div>}
                                            actions={[
                                                <span>已部署: {item.deployedNum}</span>,
                                                <span><Icon type="like" />: {item.like}</span>,
                                                <Button type="primary" onClick={() => {
                                                    this.props.history.push({
                                                        pathname: `/common/deploy-cloud-choose`,
                                                        state: {caseID: item.id,}
                                                    });
                                                }}><FormattedMessage id='step more'/></Button>
                                            ]}
                                        >
                                            <Meta
                                                avatar={<Avatar src={lo}/>}
                                                title={item.title}
                                                description={item.description}
                                            />
                                        </Card>
                                    </span>
                                        ))
                                }
                            </div>
                        </div>
                        <div>
                            <div className={'schema-name'}><FormattedMessage id='other developer case'/></div>
                            <div className="caseAllShow">
                                {
                                    this.state.examplesOthers.length === 0 ?
                                        <Spin/>
                                        :
                                        this.state.examplesOthers.map((item, index) => (
                                            <span key={index} style={{padding: '10px 0'}}>
                                        <Card
                                            key={index}
                                            style={{width: 300}}
                                            cover={<div className='cover-div'><img className='cover-img' src={item.img} alt={item.title + '' + item.description}/></div>}
                                            actions={[
                                                <span>已部署: {item.deployedNum}</span>,
                                                <span><Icon type="like" />: {item.like}</span>,
                                                <Button type="primary" onClick={() => {
                                                    this.props.history.push({
                                                        pathname: `/common/deploy-cloud-choose`,
                                                        state: {caseID: item.id,}
                                                    });
                                                }}><FormattedMessage id='step more'/></Button>
                                            ]}
                                        >
                                            <Meta
                                                avatar={<Avatar src={item.user_id.avatar}/>}
                                                title={item.title}
                                                description={item.description}
                                            />
                                        </Card>
                                    </span>
                                        ))
                                }
                            </div>
                        </div>
                    </Content>
                </Layout>
            </div>
        )
    }
}

export default CaseShow;