import React, {useState} from 'react';
import {Tab, Message, Label, Input, Statistic, Button, Table, Segment, Dimmer, Loader} from 'semantic-ui-react'
var classnames = require('classnames');
import './SComponents.scss'
import * as Common from './common'
import * as Antd from 'antd'
import * as _ from 'lodash'
import { QuestionCircleOutlined } from '@ant-design/icons';

export const SPopConfirm = (props: {
    prompt: string, text: string, onCancel: (e: any) => any,
    onConfirm:(e: any) => any;
}) => {
    const { prompt, text , onCancel, onConfirm} = props;
    return <Antd.Popconfirm onCancel={onCancel} onConfirm={onConfirm} title={prompt}>
        <a href="#">{text}</a>
    </Antd.Popconfirm>
}

export class SInput extends React.Component<
{onClick?:any, placeholder?:string, onKeyUp?:any, onChange?:any, onFocus?:any, onBlur?:any,label?:String, className?:string,  value:string,inputRef?:any}, {}>
{
    constructor(props) {
        super(props)

    }
    render() {
        return <input ref={this.props.inputRef} 
        placeholder={this.props.placeholder}
        onKeyUp={this.props.onKeyUp}
        onClick={this.props.onClick}
        onChange={this.props.onChange}
        onFocus={this.props.onFocus}
        onBlur={this.props.onBlur}
        className={this.props.className}
        value={this.props.value}
        />
    }
}

export const SInputRef:any = React.forwardRef((props , ref) => (
    <SInput {...props as any} inputRef={ref}/>

  ));

export class SInputSource extends React.Component{
	constructor(props) {
		super(props)
	}
	render() {
        return <button draggable className='InputCircle' ></button>
	}
}
export class SHint extends React.Component<{},{}> {
    constructor(props) {
        super(props)
    }
    render() {
        return <Message info>{this.props.children}</Message>
    }
}
export class SDeleteButton extends React.Component<{onClick:Function},  {}> {
    constructor(props) {
        super(props)
    }
    render() {
        return null;
    }
}
export class SButton extends React.Component<{className?:string, onClick:Function},  {}> {
    constructor(props) {
        super(props)
    }
    render() {
        return <Button 
        onClick={this.props.onClick as any } 
        className={`${this.props.className} SButton`}>{this.props.children}</Button> 
    }
}

export class SHeader2 extends React.Component<{}, {}>
{
    constructor(props){
        super(props)
    }
    render() {
        return <div className='HeaderContainer2'>
            <h2 className='Header2'>{this.props.children}</h2>
        </div>

    }
}

export class SContainer extends React.Component<{className?:string},{}> {

    constructor(props) {
        super(props)
    }
    render() {
        return <div className={classnames(this.props.className)}>
            {this.props.children}
        </div>

    }

}
type STitleProps =  {
    text:string
    className?:string
}
export const STitle = (props) => 
{
    let {className, text} = props
    return <h1 className={classnames('STitle', className)}>{props.text}</h1>
}

export class SBody extends React.Component<{className?:string}, {}> {
    constructor(props){
        super(props)
    }
    render() {
        return <div className={classnames('SBody', this.props.className)}>
            {this.props.children}
        </div>
    }
}

export class SBody2 extends React.Component<{className?:string}, {}> {
    constructor(props){
        super(props)
    }
    render() {
        return <div className={classnames('SBody2', this.props.className)}>
            {this.props.children}
        </div>
    }
}
export class SHeaderContainer extends React.Component<{className?:string}, {}> {
    constructor(props){
        super(props)
    }
    render() {
        return <div className={`${this.props.className} HeaderContainer`}>
            {this.props.children}
            </div>;
    }
}

export class SHeader3 extends React.Component<{ className?: string }, {}>
{
    constructor(props) {
        super(props)
    }
    render() {
        return <SHeader className={
            classnames({
                SHeader3: true,
                [this.props.className]: this.props.className
            })
        }>
            {this.props.children}
        </SHeader>
    }
}

export class SHeader extends React.Component<{className?:string}, {}>
{
    constructor(props){
        super(props)
    }
    render() {
        return <h4 className={`${this.props.className} SHeader`}>{this.props.children}</h4>
    }
}

export class STab extends React.Component<{className?:string, onTabChange:any, panes:any; activeIndex:number;},{}> {
    constructor(props) {
        super(props)
    }
    render() {
        return <Tab  onTabChange={this.props.onTabChange as any}
            activeIndex={this.props.activeIndex} className={`${this.props.className} StepDetailTabHeader`} panes={this.props.panes} />
    }
}

export class SSecondaryTab extends React.Component<{onTabChange:any, panes:any; activeTab:number;},{}> {
    constructor(props) {
        super(props)
    }
    render() {
        return <Tab onTabChange={this.props.onTabChange as any}
            menu={{ secondary: true, pointing: true }} 
            activeIndex={this.props.activeTab} className='SecondaryTabHeader' panes={this.props.panes} />

    }
}
export class SHR extends React.Component<{}, {}> {
    constructor(props){
        super(props)
    }
    render() {
        return <hr className='Separator'/>
    }
}

export class SHeaderButton extends React.Component<{onClick?: Function, className?:string}, {}>{
    constructor(props){
        super(props)
    }
	render() {
		return (
			<button className={`${this.props.className} SHeaderButton`} onClick={this.props.onClick as any}>
				{this.props.children}
			</button>
		)
	}
}

export class SLeftButton extends React.Component<{onClick?:Function, className?:string, active:boolean}, {
}>{
    constructor(props){
        super(props)
    }
    render() {
        return <button onClick={this.props.onClick as any} className={`SLeftButton ${this.props.className} ${this.props.active ? 'SLeftButtonActive':''}`}><span className='SLeftButtonText'>{this.props.children}</span></button>;
    }
}

export class SIcon extends React.Component<{name:string, className?:string ,onClick?:Function},{}>
{
    constructor(props){
        super(props)
    }
    render(){
        return null;
    }
}

export class SJSONTree extends React.Component<{
	lineRenderer?:Function;
	getItemString?:Function;
	labelRenderer?:Function
	valueRenderer?:Function;
	data:any;
	}, {

	}>
	{
	constructor(props){
		super(props)
	}
	render() {
		return null;
	}
}
export class SDivider extends React.Component<{className?:string},{}> {
    constructor(props) {
        super(props)
    }
    render() {
        const {className} = this.props
        return <hr className={classnames(className, 'SDivider')}></hr>
    }

}

export class SNameInput extends React.Component<{
    className?: string,
    onUpdateValue: Function,
    value:string;
    onClick:Function;
}, {
    editing: boolean;
    value: string
}> {
    inputRef:any;
    click:any = null;
    constructor(props) {
        super(props)
        this.state = {editing:false, value:''}
        this.inputRef = React.createRef()
        this.click = _.debounce((e) => {
            console.log("calling props on click")

            this.props.onClick(e)
        }, 150)
    }
    onInputBlur = (e) => {
        console.log("input blur" )
        this.props.onUpdateValue(this.state.value)
        this.setState({editing:false})
    }
    onKeyPress = (e) => {
        if (e.keyCode == 13) {//enter
            this.onInputBlur(e)
        }
    }
    onChange = (e) => {
        this.setState({value:e.target.value})
    }
    onDoubleClick = (e) => {
        this.click.cancel()
        this.setState({editing:true, value:this.props.value},() => {
        this.inputRef.current.focus()
        this.inputRef.current.select()
        })
        //e.stopPropagation()
    }
    onClick = (e) => {
        this.click(e)
    }
    onInputClick = (e) => {
        e.stopPropagation()
    }
    render() {
        let myClassNames = classnames('SNameInput', this.props.className)
        let inputClassNames = classnames(
        {
            'SNameInputEditing':this.state.editing
        })
        return <span onClick={this.onClick} onDoubleClick={this.onDoubleClick} className={myClassNames}>
            {this.state.editing == true && <input 
            onClick={this.onInputClick}
            ref={this.inputRef}
            className={inputClassNames} onKeyDown={this.onKeyPress} value={this.state.value} onBlur={this.onInputBlur} onChange={this.onChange}/>}
            {this.state.editing == false && this.props.children}
        </span>

    }
}

export class SHelpIcon extends React.Component<{
    detail:any,
}, {}>{
    constructor(props) {
        super(props)
    }
    render(){
        return null;
    }
}

export class SNoticeIcon extends React.Component<{
    detail:any
}, {}> {
    constructor(props) {
        super(props)
    }
    render() {
        return null;
    }
}

type SLabelProps = {
    className?:string;
    children?:React.ReactNode
}
export const SLabel = (props) => {
    return <div className={classnames(props.className)}>{props.children}</div>
}
export class SCheckbox extends React.Component<
    { checked: boolean, onChange: (result:boolean) => any, className?: string },
    {}> {
    constructor(props) {
        super(props)
    }

    onChange = (e) => {
        this.props.onChange(e.target.checked)
    }
    render() {
        return <Antd.Checkbox className={classnames(this.props.className)} checked={this.props.checked} onChange={this.onChange }></Antd.Checkbox>

    }

}
type SParamInputBoxProps = {
    placeholder?:string;
    className?:string;
    autoFocus:boolean;
    onChange : React.ChangeEventHandler;
    value:string;
    readonly?:boolean;
}
export const SParamInputBox = (props: SParamInputBoxProps) => {
    let {placeholder, className, autoFocus, onChange,value, readonly} = props
    return <input readOnly={readonly} value={value} className={classnames('ParamInputBox', className)} placeholder={placeholder} autoFocus={autoFocus} onChange={onChange}/>
}

export const SPopover = (props:{title:React.ReactNode, data:React.ReactNode, children:React.ReactNode}) => {
    return null;
}
export const SValueWithLabel = (props: { className?: string, value: React.ReactNode, label: React.ReactNode }) => {
    const {className,value, label} = props
    return <Common.DivWithClassName className=
    {Common.classNames({
        rowFlexBox:true, 
        [className]:className
    })}
    >
        <SLabel className='ValueWithLabelLabel'>{label}</SLabel> 
        <span className='ValueWithLabelValue'>{value}</span>
    </Common.DivWithClassName>

}
export const SInputWithLabel = (props: { onChange:any, className?: string, value: string, label: React.ReactNode }) => {
    const {className,value, label, onChange} = props
    return <Common.DivWithClassName className=
    {Common.classNames({
        rowFlexBox:true, 
        [className]:className
    })}
    >
        <SLabel className='ValueWithLabelLabel'>{label}</SLabel> 
        <SInput onChange={onChange} value={value} className='ValueWithLabelValue'/>
    </Common.DivWithClassName>

}
