import cx from 'classnames';
import {SvgFastLeft, SvgFastRight, SvgPlainDown, SvgPlainLeft, SvgPlainRight, SvgPlainUp} from '@befe/brick-icon';
import {Icon} from '@befe/brick-comp-icon';
import {brk} from '@befe/brick-utils';
import {cls} from '../utils/cls';

export interface UIPanelTitleProps {
    text: string
    withZoomingIcon?: boolean
    isZooming: boolean
    shouldShowInner?: boolean

    rangeControl: 'left' | 'right' | 'none'
    /**
     * both : 双向剪头
     *
     * plain-only & none 仅用于控制 "range 内侧" 的剪头按钮
     * plain-only : 只显示 "月份切换剪头"
     * none : 都不显示
     */
    rangeShowType: 'both' | 'plain-only' | 'none'

    onFastLeftClick: () => void
    onFastRightClick: () => void
    onPlainLeftClick?: () => void
    onPlainRightClick?: () => void
    onZoomingClick?: () => void
}

/**
 *
 * @param props
 * @constructor
 */
export const UiPanelTitle = (props: UIPanelTitleProps) => {
    const plainLeftElem = (
        <Icon
            className={brk('nav-icon')}
            svg={SvgPlainLeft}
            key={'plain-left'}
            onClick={props.onPlainLeftClick}
        />
    );

    const plainRightElem = (
        <Icon
            className={brk('nav-icon')}
            svg={SvgPlainRight}
            key={'plain-right'}
            onClick={props.onPlainRightClick}
        />
    );

    const fastLeftElem = (
        <Icon
            className={brk('nav-icon')}
            svg={SvgFastLeft}
            key={'fast-left'}
            onClick={props.onFastLeftClick}
        />
    );

    const fastRightElem = (
        <Icon
            className={brk('nav-icon')}
            svg={SvgFastRight}
            key={'fast-right'}
            onClick={props.onFastRightClick}
        />
    );

    let shouldShowPlainLeft = false;
    let shouldShowPlainRight = false;
    if (props.shouldShowInner) {
        if (props.rangeControl === 'left') {
            shouldShowPlainRight = true;
            if (props.rangeShowType !== 'none') {
                shouldShowPlainLeft = true;
            }
        } else if (props.rangeControl === 'right') {
            shouldShowPlainLeft = true;
            if (props.rangeShowType !== 'none') {
                shouldShowPlainRight = true;
            }
        } else {
            shouldShowPlainLeft = true;
            shouldShowPlainRight = true;
        }
    }

    let shouldShowFastLeft = false;
    let shouldShowFastRight = false;
    if (props.rangeControl === 'left') {
        shouldShowFastRight = true;
        if (props.rangeShowType === 'both') {
            shouldShowFastLeft = true;
        }
    } else if (props.rangeControl === 'right') {
        shouldShowFastLeft = true;
        if (props.rangeShowType === 'both') {
            shouldShowFastRight = true;
        }
    } else {
        shouldShowFastRight = true;
        shouldShowFastLeft = true;
    }

    const navBackElem = shouldShowFastLeft || shouldShowPlainLeft
        ? (
            <div className={brk('nav-back')}>
                {shouldShowFastLeft ? fastLeftElem : null}
                {shouldShowPlainLeft ? plainLeftElem : null}
            </div>
        )
        : null;

    const navForwardElem = shouldShowFastRight || shouldShowPlainRight
        ? (
            <div className={brk('nav-forward')}>
                {shouldShowPlainRight ? plainRightElem : null}
                {shouldShowFastRight ? fastRightElem : null}
            </div>
        )
        : null;

    // console.log({navBackElem, navForwardElem}, props);

    const zoomingIconElem = props.withZoomingIcon
        ? (
            <Icon
                className={brk('zooming')}
                svg={props.isZooming ? SvgPlainUp : SvgPlainDown}
            />
        )
        : null;

    return (
        <div className={cx(cls('title'))}>
            {navBackElem}
            {navForwardElem}
            <div
                className={brk(
                    'panel-title',
                    props.withZoomingIcon && 'has-zooming'
                )}
                onClick={
                    props.withZoomingIcon ? props.onZoomingClick : undefined
                }
            >
                <span className={brk('title-text')}>
                    {props.text}
                </span>
                {zoomingIconElem}
            </div>
        </div>
    );
};