import React, {useEffect, useRef, useState} from 'react';

// 多用用if(typeOf something === 'string'){}这种方式去解决问题

interface Person {
    firstName: string,
    lastName: string,
}
type RealOrFake = 'real' | 'fake';
type StringOrBoolean = 'string'| boolean;
interface props {
    firstName?: string;
    age: number;
    ok: boolean,
    fn: (lastName: string) => string,
    obj?: {
        f1: string
    },
    obj2?: Person,
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
    str?: 'real'|'fake',
    haha?: RealOrFake,
    func?: Function,
    unknown: unknown,
}

const ComponentOne:React.FC<props> = ({firstName, age, onChange}) => {
    const [name, setName] = useState<string|undefined>(firstName);
    const elRef = useRef<HTMLParagraphElement>(null);

    useEffect(() => {
        setName(undefined);
        const name = document.getElementById('jj') as HTMLInputElement;
    }, []);
    return (
        <div>
            <p ref={elRef}>{name}</p>
            <p>{age}</p>
            <input type="text" onChange={onChange}/>
            <Dd>
                {({count, setCount}) => (
                    <div>
                        {count}
                        <button onClick={() => setCount(count + 1)}>click me</button>
                    </div>
                )}
            </Dd>
        </div>
    );
};

interface Props {
    children: (data: {
            count: number;
            // setCount: React.Dispatch<React.SetStateAction<number>>;
        setCount: any;
        }) => JSX.Element | null
}

const Dd:React.FC<Props> = ({children}) => {
    const [count, setCount] = useState(1);
    const divRef = useRef();
    return (
        <div ref={divRef}>
            {children({count, setCount})}
        </div>
    )
};

enum Role {NAME = 'haha', age = 'youta'}

function combine(input1: number|string, input2: number|string){
    if(typeof input1 === 'number' && typeof input2 === 'number'){
        return input1 + input2;
    }
}
const func = (): number => {
    return 1;
}
// interface input {
//     input1: string,
//     input2: string,
// }
// function combine<input>(input1, input2){
//     return input1 + input2;
// }

export default ComponentOne;