import React, { Component } from 'react'
import { Button, Card, Col, Descriptions, Modal, Row, Spin, Tooltip, Upload } from 'antd'
import { AntIcon, Image } from 'components'
import { Cropper } from 'react-cropper'
import 'cropperjs/dist/cropper.css'
import { BlobToFile } from 'util/file'

import { api } from 'common/api'

export default class base extends Component {
    state = {
        img: true,

        cropperVisible: false,
        loadingAvatar: false,
    }

    cropper = React.createRef()

    avatarFile = null

    async onOpenAvatarCropper() {
        this.setState({ cropperVisible: true })
    }

    onCloseAvatarCropper() {
        this.setState({ cropperVisible: false }, () => {
            setTimeout(() => {
                const cropper = this.cropper.current && this.cropper.current.cropper
                if (cropper) {
                    cropper.destroy()
                }
                this.avatarFile = null
                this.setState({ img: true })
            }, 300)
        })
    }

    onUploadAvatar() {
        this.setState({ loadingAvatar: true })
        const canvas = this.cropper.current.cropper.getCroppedCanvas()
        canvas.toBlob(async data => {
            try {
                const file = BlobToFile(data, this.avatarFile.name, this.avatarFile.type)
                const fd = new FormData()
                fd.append('file', file)
                const { data: avatar } = await api.sysFileInfoUpload(fd)
                await api.sysUserUpdateInfo({ avatar })
                this.onCloseAvatarCropper()
                this.props.loadData()
            } finally {
                this.setState({ loadingAvatar: false })
            }
        })
    }

    render() {
        const { user } = this.props

        const { img, cropperVisible, loadingAvatar } = this.state

        const cropper = this.cropper.current && this.cropper.current.cropper

        return (
            <>
                <Card title="我的信息">
                    <div className="yo-avatar-info">
                        <Image id={user.avatar} type="avatar" size={128} />
                        <div
                            onClick={() => this.onOpenAvatarCropper()}
                            className="yo-avatar-info--cover"
                        >
                            <AntIcon type="sync" />
                        </div>
                    </div>
                    <br />
                    <Descriptions column={1} labelStyle={{ width: '100px' }}>
                        <Descriptions.Item label="用户名">{user.name}</Descriptions.Item>
                        <Descriptions.Item label="昵称">{user.nickName}</Descriptions.Item>
                        <Descriptions.Item label="帐号">{user.account}</Descriptions.Item>
                        <Descriptions.Item label="性别">
                            {user.sex === 0
                                ? '保密'
                                : user.sex === 1
                                ? '男性'
                                : user.sex === 2
                                ? '女性'
                                : '保密'}
                        </Descriptions.Item>
                        <Descriptions.Item label="生日">
                            {user.birthday &&
                                (typeof user.birthday === 'string'
                                    ? user.birthday
                                    : user.birthday.format('YYYY-MM-DD'))}
                        </Descriptions.Item>
                    </Descriptions>
                </Card>
                <Modal
                    visible={cropperVisible}
                    width={800}
                    footer={false}
                    destroyOnClose
                    onCancel={() => this.onCloseAvatarCropper()}
                >
                    <Spin spinning={loadingAvatar} indicator={<AntIcon type="loading" />}>
                        <Row gutter={16} align="middle">
                            <Col span={12}>
                                <div className="yo-avatar-cropper">
                                    <Cropper
                                        ref={this.cropper}
                                        src={img}
                                        style={{ width: '100%', height: 240 }}
                                        cropBoxResizable={false}
                                        aspectRatio={1}
                                        preview=".yo-avatar-preview"
                                    />
                                </div>
                            </Col>
                            <Col span={12}>
                                <div className="yo-avatar-preview" />
                            </Col>
                            <Col span={12} className="mt-md text-center">
                                <Upload
                                    beforeUpload={file => {
                                        this.avatarFile = file
                                        const reader = new FileReader()
                                        reader.readAsDataURL(file)
                                        reader.onload = () => {
                                            this.setState({ img: reader.result })
                                        }
                                        return false
                                    }}
                                    showUploadList={false}
                                    className="mr-xs"
                                >
                                    <Button type="primary" icon={<AntIcon type="picture" />}>
                                        选择图片
                                    </Button>
                                </Upload>

                                <Button.Group>
                                    <Tooltip placement="bottom" title="放大">
                                        <Button
                                            disabled={!cropper}
                                            type="text"
                                            onClick={() => cropper.zoom(0.1)}
                                            icon={<AntIcon type="zoom-in" />}
                                        />
                                    </Tooltip>
                                    <Tooltip placement="bottom" title="缩小">
                                        <Button
                                            disabled={!cropper}
                                            type="text"
                                            onClick={() => cropper.zoom(-0.1)}
                                            icon={<AntIcon type="zoom-out" />}
                                        />
                                    </Tooltip>
                                    <Tooltip placement="bottom" title="左旋">
                                        <Button
                                            disabled={!cropper}
                                            type="text"
                                            onClick={() => cropper.rotate(-90)}
                                            icon={<AntIcon type="undo" />}
                                        />
                                    </Tooltip>
                                    <Tooltip placement="bottom" title="右旋">
                                        <Button
                                            disabled={!cropper}
                                            type="text"
                                            onClick={() => cropper.rotate(90)}
                                            icon={<AntIcon type="redo" />}
                                        />
                                    </Tooltip>
                                </Button.Group>
                            </Col>
                            <Col span={12} className="mt-md text-center">
                                <Button
                                    disabled={!cropper}
                                    type="primary"
                                    className="mr-xs"
                                    onClick={() => this.onUploadAvatar()}
                                >
                                    确认
                                </Button>
                                <Button onClick={() => this.onCloseAvatarCropper()}>取消</Button>
                            </Col>
                        </Row>
                    </Spin>
                </Modal>
            </>
        )
    }
}
