import React, { Component } from 'react';
import { Shape, Surface, Path } from '@react-native-community/art';
import { px2dp, width } from '../../utils/base';
export interface Props {
}

export interface State {
    increase: boolean
    a: number
    b: number
}


export default class ArtWaveLine extends React.Component<Props, State> {
    constructor(props: Props | Readonly<Props>) {
        super(props);

    }

    // constructor(props) {
    //     super(props);
    //     this.surfaceWidth = this.props.surfaceWidth;
    //     this.surfaceHeigth = this.props.surfaceHeigth;
    //     this.state = {
    //         a: 1.5,
    //         b: 0,
    //         increase: false,
    //     };
    // }

    public readonly state: Readonly<State> = {
        a: 1.5,
        b: 0,
        increase: false,
    }

    public surfaceWidth = px2dp(44)
    public surfaceHeigth = px2dp(44)
    public intervalTimer = null

    componentDidMount() {
        this.intervalTimer = setInterval(() => {
            var a = this.state.a
            var b = this.state.b
            var increase = this.state.increase
            if (increase) {
                a += 0.01
            } else {
                a -= 0.01
            }
            if (a <= 1) {
                increase = true
            }
            if (a >= 1.5) {
                increase = false
            }
            b += 0.1
            this.setState({
                a: a,
                b: b,
                increase: increase
            })
        }, 20)
    }

    componentWillUnmount() {
        this.intervalTimer && clearInterval(this.intervalTimer)
    }

    //绘制渐变的背景
    artBg() {
        const w = this.surfaceWidth
        const h = this.surfaceHeigth
        const pathBase = new Path()
            .moveTo(0, 0) // 改变起点为 0,5 。默认为0,0
            .lineTo(w, 0) // 目标点
            .lineTo(w, h) // 目标点
            .lineTo(0, h) // 目标点
            .close();
        let colors = ["#0063cd", "#00a7f4",];
        // let linearGradient = new LinearGradient(colors, 0, 0, 90, 280);

        return <Surface width={this.surfaceWidth} height={this.surfaceHeigth} >
            {/* <Shape d={pathBase} fill={"#a1c4fd"} /> */}
            {this.wave(px2dp(10), '#1fb6f8')}
            {this.wave1('#67d2fd')}
            {/*    {this.wave2('#fff')} */}
        </Surface>
    }

    // 正弦曲线公式： y = A sin(Bx + C) + D

    // A 控制振幅，A 值越大，波峰和波谷越大，A 值越小，波峰和波谷越小；
    // B 值会影响周期，B 值越大，那么周期越短，B 值越小，周期越长。
    // C 值会影响图像左右移动，C 值为正数，图像右移，C 值为负数，图像左移。
    // D 值控制上下移动。

    //绘制波浪
    wave(startY, fl) {
        const a = this.state.a
        const b = this.state.b
        const w = this.surfaceWidth
        const h = this.surfaceHeigth
        const pathBase = new Path()
        pathBase.moveTo(0, 0) // 改变起点为 0,5 。默认为0,0
        for (var i = 0; i <= w; i += 0.1) {
            var x = i * 10;
            var y = a * Math.cos(i + b) * 2 + startY;

            pathBase.lineTo(x, y);
        }
        pathBase.lineTo(w, h) // 目标点
        pathBase.lineTo(0, h);
        pathBase.close();
        return <Shape d={pathBase} fill={fl} opacity={0.6} />
    }

    wave1(fl) {
        const a = this.state.a
        const b = this.state.b
        const w = this.surfaceWidth
        const h = this.surfaceHeigth
        const pathBase = new Path()
        pathBase.moveTo(0, 0) // 改变起点为 0,5 。默认为0,0
        for (var i = 0; i <= w / 10; i += 0.1) {
            var x = i * 10;
            var y = a * Math.sin(i + b) * 10 + px2dp(10);
            pathBase.lineTo(x, y);
        }
        pathBase.lineTo(w, h) // 目标点
        pathBase.lineTo(0, h);
        pathBase.close();
        return <Shape d={pathBase} fill={fl} />
    }
    // wave2(fl) {
    //     const a = this.state.a
    //     const b = this.state.b
    //     const w = this.surfaceWidth
    //     const h = this.surfaceHeigth
    //     const pathBase = new Path()
    //     pathBase.moveTo(0, 175) // 改变起点为 0,5 。默认为0,0
    //     for (var i = 0; i <= w / 98; i += 0.1) {
    //         var x = i * 100;
    //         var y = a * Math.sin(i + b) * 10 + 175;
    //         pathBase.lineTo(x, y);
    //     }
    //     pathBase.lineTo(w, h) // 目标点
    //     pathBase.lineTo(0, h);
    //     pathBase.close();
    //     return <Shape d={pathBase} fill={fl} />
    // }

    render() {
        return (
            // <View style={{ width: this.surfaceWidth, height: this.surfaceHeigth, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.0)', }}>
            //     {this.artBg()}
            // </View>
            <Surface width={this.surfaceWidth} height={this.surfaceHeigth} >
                {/* <Shape d={pathBase} fill={"#a1c4fd"} /> */}
                {this.wave(px2dp(25), '#c2e9fb')}
                {/* {this.wave1('#67d2fd')} */}
                {/* {/* {this.wave2('#fff')} */}
            </Surface>
        )
    }
}