import {ReactNode, Ref} from 'react'

import {noop} from 'lodash-es';
import {UiPanelTitle} from '../src/ui-comps/ui-panel-title'
import {TypeLayoutRenderedItem, UiItemLayout} from '../src/ui-comps/ui-item-layout'
import {
    dateRows,
    dateStatusMap,
    monthRows,
    quarterRows,
    titleRows,
    yearAsideList,
} from '../demo-mock/mock-data'
import {UiAside} from '../src/ui-comps/ui-aside'
import {TypeItemProps, UILayoutItem} from '../src/ui-comps/ui-item'
import {TypeItemStatus, TypeLayoutItem} from '../src/module-defs/ui-types';

export const DemoField = (props: { children: ReactNode }) => (
    <div className="control-wrap">
        {props.children}
    </div>
);

export function renderMonthAsideElem(monthAsideElemRef?: Ref<UiAside>) {
    return (
        <UiAside
            asideItems={yearAsideList}
            itemKeySelected={2019}
            ref={monthAsideElemRef || null}
        />
    )
}

export function renderStateContentItem(item: TypeLayoutItem) {
    const extraProps: Partial<TypeItemProps> = dateStatusMap[item.key] || {}

    return {
        elem: <UILayoutItem
            key={item.key}
            text={item.text}
            {...extraProps}
        />,
        prevGapClassName: extraProps.rangeType === 'inside' || extraProps.rangeType === 'end'
            ? 'inside-range' : '',
    }
}

export function renderPlainContentItem(item: TypeLayoutItem) {
    return {
        elem: <UILayoutItem
            key={item.key}
            text={item.text}
        />,
    }
}

export function renderMonthStateContentItem(item: TypeLayoutItem) {
    const extraProps: Partial<TypeItemStatus> = {}
    if (item.text === '6月') {
        extraProps.selected = true
    } else if (item.text === '10月' || item.text === '11月') {
        extraProps.disabled = true
    }

    return {
        elem: <UILayoutItem
            key={item.key}
            text={item.text}
            {...extraProps}
        />,
    }
}

export function renderDateContentElem(
    renderItem: (item: TypeLayoutItem) => TypeLayoutRenderedItem
) {
    return (
        <UiItemLayout
            titleRow={{
                items: titleRows,
            }}
            rows={dateRows}
            renderItem={renderItem}
        />
    )
}

export function renderDateTitleElem() {
    return (
        <UiPanelTitle
            text={'2018年 8月'}
            withZoomingIcon
            isZooming
            shouldShowInner
            rangeControl={'none'}
            rangeShowType={'both'}
            onFastLeftClick={noop}
            onFastRightClick={noop}
        />
    )
}

export function renderMonthContentElem(renderItem: typeof renderMonthStateContentItem) {
    return (
        <UiItemLayout
            rows={monthRows}
            renderItem={renderItem}
        />
    )
}

export function renderMonthOrQuarterTitleElem({
    isZooming = true,
} = {}) {
    return (
        <UiPanelTitle
            text={'2019年'}
            withZoomingIcon
            isZooming={isZooming}
            shouldShowInner={false}
            rangeControl={'none'}
            rangeShowType={'plain-only'}
            onFastLeftClick={noop}
            onFastRightClick={noop}
        />
    )
}

export function renderQuarterContentElem(renderItem: typeof renderMonthStateContentItem) {
    return (
        <UiItemLayout
            rows={quarterRows()}
            renderItem={renderItem}
        />
    )
}