import React,{useCallback,useState}from"react";import{Calendar}from"./Calendar.js";import DatePickerInput from"./DatePickerInput.js";import TimePickerInput from"./TimePickerInput.js";import{renderFocus}from"../common.js";import{renderCalendar,renderClock}from"../assets/datetime.js";import FormElementOuter from"../FormElementOuter.js";import{makeSafeClassName}from"../utils.js";export default e=>{const[t,a]=useState(!1),[o,r]=useState(!1),{component:n,element:l}=e,{host:i,name:c}=n.props;var s=useCallback(e=>{renderFocus(e,c,i)},[c,i]);const u=[l.type,makeSafeClassName(c)];var d=i.renderText(l.tooltip);const m=((e,t)=>{if("object"==typeof e&&null!==e)switch(e.refValueType){case"date":case"time":case"datetime":t=e.format}if("object"!=typeof t)return"app"===t?t:"device";if(null===t)return"device";var a=t.locale,o=t.timezone;return"string"==typeof a&&"string"==typeof o?{locale:a,timezone:o}:"device"})(l.value,l.format),p=i.deriveCalendar(m),f=((e,t)=>{if("object"==typeof e){if(null===e)return;switch(e.refValueType){case"date":case"time":case"datetime":break;default:return}e=e.value}if("number"==typeof e||"string"==typeof e){const a=t.coerceIntoValue(e);if(void 0!==a&&null!==a&&isFinite(a.valueOf()))return a}})(l.value,p);let v="datetime",g=(e=>{if("object"==typeof e&&null!==e)switch(e.refValueType){case"date":case"time":case"datetime":return e.refValueType}})(l.value);"DatePicker"===l.type&&(v="date"),"TimePicker"===l.type&&(v="time");let k=f;"datetime"===v&&"date"===g?k=void 0:g=v;var y={calendar:p,disabled:!n.enabled,doneText:i.renderText("@common-done"),placeholder:i.renderText(l.prompt),title:d};function b(e,t){return void 0===(e=null!=e&&!isFinite(e.valueOf())?void 0:e)?void 0!==f:void 0===f||(g!==t||("date"===t&&((e=new Date(e)).setHours(f.getHours()),e.setMinutes(f.getMinutes()),e.setSeconds(f.getSeconds()),e.setMilliseconds(f.getMilliseconds())),"time"===t&&((e=new Date(e)).setFullYear(f.getFullYear()),e.setMonth(f.getMonth()),e.setDate(f.getDate())),f.valueOf()!==e.valueOf()))}e=()=>{var e=!t;a(e),e&&r(!1)},d=()=>{var e=!o;r(e),e&&a(!1)};const T=[];function C(e,t){void 0!==e&&isFinite(e.valueOf())?l.value={refValueType:t,format:m,display:p.format(e,Calendar.fullFormat),value:e.valueOf()}:l.value=void 0}return"DatePicker"!==l.type&&"DateTimePicker"!==l.type||T.push(React.createElement("div",{className:"outer"},React.createElement("div",{className:"inner"},React.createElement(DatePickerInput,Object.assign({},y,{isOpen:t,onChange:function(e){let t=v;if("datetime"===v&&void 0!==e&&("date"===g&&(t="date"),void 0!==f)){const a=p.coerceIntoLocal(f),o=p.coerceIntoLocal(e);o.setHours(a.getHours()),o.setMinutes(a.getMinutes()),o.setSeconds(a.getSeconds()),o.setMilliseconds(a.getMilliseconds()),e=p.coerceIntoValue(o)}b(e,t)&&(C(e,t),n.forceUpdate(),i.post("changed",{name:c,value:l.value}))},onPopupToggle:e,ref:s,value:f}))),React.createElement("button",{className:"calendarButton",disabled:y.disabled,onClick:e},renderCalendar()))),"TimePicker"!==l.type&&"DateTimePicker"!==l.type||T.push(React.createElement("div",{className:"outer"},React.createElement("div",{className:"inner"},React.createElement(TimePickerInput,Object.assign({},y,{isOpen:o,onChange:function(e){let t=v;if("datetime"===v&&void 0!==f)if(void 0!==e){const a=p.coerceIntoLocal(f),o=p.coerceIntoLocal(e);o.setFullYear(a.getFullYear()),o.setMonth(a.getMonth()),o.setDate(a.getDate()),e=p.coerceIntoValue(o)}else e=f,t="date";b(e,t)&&(C(e,t),n.forceUpdate(),i.post("changed",{name:c,value:l.value}))},onPopupToggle:d,ref:s,value:k}))),React.createElement("button",{className:"clockButton",disabled:y.disabled,onClick:d},renderClock()))),C(f,g),React.createElement(FormElementOuter,{className:u.join(" "),component:n,element:l},T)};