@namespace AntDesign
@inherits DatePickerBase<TValue>
@typeparam TValue
@using AntDesign.Internal;

<CascadingValue Value='$"{PrefixCls}-dropdown"' Name="PrefixCls">
    <OverlayTrigger @ref="_dropDown"
                    Visible="Open"
                    IsButton="@true"
                    Disabled="Disabled"
                    PopupContainerSelector="@PopupContainerSelector"
                    OnVisibleChange="visible => { AutoFocus = visible; OnOpenChange.InvokeAsync(visible); }"
                    OverlayEnterCls="ant-slide-up-enter ant-slide-up-enter-active ant-slide-up ant-picker-dropdown-range"
                    OverlayLeaveCls="ant-slide-up-leave ant-slide-up-leave-active ant-slide-up ant-picker-dropdown-range"
                    Trigger="new TriggerType[] { TriggerType.Click }">
        <Overlay>
            <div class="@(PrefixCls)-range-arrow" style="@_rangeArrowStyle"/>
            <div class="@(PrefixCls)-panel-container">
                <div class="@(PrefixCls)-panels">
                    <div class="@(PrefixCls)-panel">
                        <DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="0" OnSelect="async (date, index) => await OnSelect(date)" />
                    </div>
                    <div class="@(PrefixCls)-panel">
                        <DatePickerPanelChooser TValue="TValue" DatePicker="@this" PickerIndex="1" OnSelect="async (date, index) => await OnSelect(date)" />
                    </div>
                </div>
                @if (RenderExtraFooter != null && !IsShowTime)
                {
                    <div class="@(PrefixCls)-footer">
                        <div class="@(PrefixCls)-footer-extra">
                            @RenderExtraFooter
                        </div>
                    </div>
                }
            </div>
        </Overlay>
        <Unbound>
            <div class="@ClassMapper.Class"
                 @ref="@context.Current"
                 style="@Style"
                 Id="@Id">
                <DatePickerInput @ref="_inputStart"
                                 PrefixCls="@PrefixCls"
                                 Size="@Size"
                                 Disabled="@Disabled"
                                 Value="@GetInputValue(0)"
                                 Placeholder="@_placeholders[0]"
                                 ReadOnly="@InputReadOnly"
                                 AutoFocus="@AutoFocus"
                                 OnClick="async e => { await OnInputClick(0); }"
                                 OnInput="e => OnInput(e, 0)"
                                 OnKeyUp="e => OnKeyUp(e, 0)"
                                 Onfocus="() => OnFocus(0)"
                                 ShowTime="@(Picker == DatePickerType.Time)"
                                 ShowSuffixIcon="false"
                                 IsRange="@IsRange"
                                 AllowClear="@AllowClear"
                                 OnClickClear="e => ClearValue(0)" />

                <div class="@(PrefixCls)-range-separator">
                    <span aria-label="to" class="@(PrefixCls)-separator">
                        <Icon Type="swap-right" Theme="outline" />
                    </span>
                </div>

                <DatePickerInput @ref="_inputEnd"
                                 PrefixCls="@PrefixCls"
                                 Size="@Size"
                                 Disabled="@Disabled"
                                 Value="@GetInputValue(1)"
                                 Placeholder="@_placeholders[1]"
                                 ReadOnly="@InputReadOnly"
                                 AutoFocus="@AutoFocus"
                                 OnClick="async e => { await OnInputClick(1); }"
                                 OnInput="e => OnInput(e, 1)"
                                 OnKeyUp="e => OnKeyUp(e, 1)"
                                 Onfocus="() => OnFocus(1)"
                                 ShowTime="@(Picker == DatePickerType.Time)"
                                 IsRange="@IsRange"
                                 AllowClear="@AllowClear"
                                 OnClickClear="e => ClearValue(0)" />
                <div class="@(PrefixCls)-active-bar" style="@_activeBarStyle"></div>
            </div>
        </Unbound>
    </OverlayTrigger>
</CascadingValue>