import React,{useCallback,useEffect,useState}from"react";import{parse,isAfter,isBefore,isEqual}from"date-fns";import{DateRange}from"react-date-range";import{renderArrowRight}from"../assets/arrow.js";import{renderCalendar}from"../assets/datetime.js";import{renderFocus}from"../common.js";import FormElementOuter from"../FormElementOuter.js";import{isIE}from"../../BrowserUtils.js";import{getDateAsLocaleFormattedString,getDateFnsLocale,getLocaleDateFormat,isValidDate,tryParseDateText}from"../dateUtilities.js";import{addStyleToDocument,makeSafeClassName}from"../utils.js";import{CSS}from"../styles/daterange.js";import{CssClasses}from"../constants.js";var DateInputType;addStyleToDocument(CSS),function(e){e.Start="start",e.End="end"}(DateInputType=DateInputType||{});const dateFormat=getLocaleDateFormat();let currentLocale;const DateRangePicker=e=>{const t=e.component,a=e.element,r=a.value,[n,o]=useState(!1),[l,i]=useState(),[s,d]=useState(getDateAsLocaleFormattedString(null===r||void 0===r?void 0:r.startDate)),[c,m]=useState(),[p,u]=useState(getDateAsLocaleFormattedString(null===r||void 0===r?void 0:r.endDate));var D=!t.enabled;const{host:v,name:g}=t.props;var y=v.renderText(a.tooltip),S=t.enabled?"inner":"inner disabled";const f=[a.type,makeSafeClassName(g)];var E=!isIE();useEffect(()=>{(async()=>{var e=v.deriveLocale();"inv"!==e&&"en"!==e&&"en-US"!==e&&(currentLocale=await getDateFnsLocale(e))})()},[]);var F=useCallback(e=>{renderFocus(e,g,v)},[]);const C=(e,t)=>{var a,r="string"==typeof e?e:e.target.value,n=""!==r&&void 0!==r,o=n?tryParseDateText(r):void 0,s=n?o?parse(o,dateFormat,0):new Date(NaN):void 0,e=t===DateInputType.Start,r=e?s:l,t=e?c:s;n?isValidDate(s)?e?(i(r),d(o),(a=!isValidDate(t)||isAfter(r,t))&&(m(r),u(o)),N(),a=a?r:t,I(r,a)):(m(t),u(o),(a=!isValidDate(r)||isBefore(t,r))&&(i(t),d(o)),N(),a=a?t:r,I(a,t)):(N({status:"invalid"}),I(),(e?i:m)(new Date(NaN))):((e?void 0===t||isValidDate(t):void 0===r||isValidDate(r))&&N(),I(),(e?i:m)(void 0))};const T=(e,t)=>{(t===DateInputType.Start?d:u)(e.target.value)},R=(e,t)=>{var a;e.stopPropagation(),"Enter"===e.key?(a=t===DateInputType.Start?s:p,C(a,t)):"Escape"===e.key&&(e=t===DateInputType.Start?getDateAsLocaleFormattedString(l):getDateAsLocaleFormattedString(c),C(e,t))},I=(e,t)=>{L(e,t)&&w(e,t)},L=(e,t)=>!(e||t||!r)||(!(!e||!t||r)||!!(e&&t&&r)&&(!isEqual(e,r.startDate)||!isEqual(t,r.endDate))),N=e=>{a.error=e,t.forceUpdate()},w=(e,t)=>{a.value=e&&t?{refValueType:"daterange",startDate:e,endDate:t}:void 0,v.post("changed",{name:g,value:a.value})};e={startDate:(null===r||void 0===r?void 0:r.startDate)||new Date,endDate:(null===r||void 0===r?void 0:r.endDate)||new Date,key:"selection",showDateDisplay:!1};return React.createElement(FormElementOuter,{className:f.join(" "),component:t,element:a},React.createElement("div",{className:"outer",title:y},React.createElement("div",{className:S},React.createElement("input",{ref:F,disabled:D,type:"text",onChange:e=>T(e,DateInputType.Start),onBlur:e=>C(e,DateInputType.Start),onKeyDown:e=>R(e,DateInputType.Start),placeholder:dateFormat.toUpperCase(),value:s}),React.createElement("span",{className:"arrow"},renderArrowRight()),React.createElement("input",{disabled:D,type:"text",onChange:e=>T(e,DateInputType.End),onBlur:e=>C(e,DateInputType.End),onKeyDown:e=>R(e,DateInputType.End),placeholder:dateFormat.toUpperCase(),value:p})),React.createElement("div",{className:"buttonContainer"},E&&React.createElement("button",{className:"calendarButton",disabled:D,onClick:()=>{o(!n)}},renderCalendar()),n&&React.createElement("div",{className:CssClasses.DROPDOWN},React.createElement(DateRange,{dateDisplayFormat:dateFormat,editableDateInputs:!1,months:1,direction:"horizontal",ranges:[e],onChange:e=>{var t=e.selection.startDate,e=e.selection.endDate;i(t),d(getDateAsLocaleFormattedString(t)),m(e),u(getDateAsLocaleFormattedString(e)),N(),I(t,e)},locale:currentLocale}),React.createElement("button",{className:"done",onClick:()=>{o(!1)}},v.renderText("@common-done"))))))};export default DateRangePicker;