/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.24/esri/copyright.txt for details.
*/
import{_ as e}from"../../chunks/tslib.es6.js";import{eventKey as t}from"../../core/events.js";import{watch as i,initial as r}from"../../core/reactiveUtils.js";import{aliasOf as a}from"../../core/accessorSupport/decorators/aliasOf.js";import"../../core/arrayUtils.js";import"../../core/has.js";import"../../core/accessorSupport/ensureType.js";import{property as o}from"../../core/accessorSupport/decorators/property.js";import{subclass as s}from"../../core/accessorSupport/decorators/subclass.js";import{getColorsFromRenderer as n}from"../../renderers/support/utils.js";import l from"../Widget.js";import d from"./FeatureMedia/FeatureMediaViewModel.js";import c from"./support/FeatureElementInfo.js";import{shouldOpenInNewTab as m}from"./support/featureUtils.js";import{loadChartsModule as u,getColorSet as p}from"../support/chartUtils.js";import{isRTL as h}from"../support/widgetUtils.js";import{messageBundle as f}from"../support/decorators/messageBundle.js";import{tsx as v}from"../support/jsxFactory.js";import{isDarkTheme as _}from"../../support/themeUtils.js";const M={base:"esri-feature-media",mediaContainer:"esri-feature-media__container",mediaItemContainer:"esri-feature-media__item-container",mediaItem:"esri-feature-media__item",mediaItemTitle:"esri-feature-media__item-title",mediaItemCaption:"esri-feature-media__item-caption",mediaPrevious:"esri-feature-media__previous",mediaPreviousIconLTR:"esri-feature-media__previous-icon",mediaPreviousIconRTL:"esri-feature-media__previous-icon--rtl",mediaNext:"esri-feature-media__next",mediaNextIconLTR:"esri-feature-media__next-icon",mediaNextIconRTL:"esri-feature-media__next-icon--rtl",mediaChart:"esri-feature-media__chart",mediaButton:"esri-feature-media__button",mediaIcon:"esri-feature-media__icon",iconLeftTriangleArrow:"esri-icon-left-triangle-arrow",iconRightTriangleArrow:"esri-icon-right-triangle-arrow"},I=.05,y=.95,w=15,g="color",b="tooltip",C="value",T="default-line-value";let x=class extends l{constructor(e,t){super(e,t),this._refreshTimer=null,this._refreshIntervalInfo=null,this._featureElementInfo=null,this.attributes=null,this.activeMediaInfoIndex=null,this.description=null,this.fieldInfoMap=null,this.layer=null,this.mediaInfos=null,this.popupTemplate=null,this.relatedInfos=null,this.title=null,this.viewModel=new d,this.messages=null,this._getChartDependencies=async e=>{const t=await u(),{destroyed:i,viewModel:r}=this;if(i||!r||!e)return;const{activeMediaInfo:a}=r,o=await this._getRendererColors(t);this._renderChart({chartDiv:e,mediaInfo:a,chartsModule:t,colorMap:o})}}initialize(){this._featureElementInfo=new c,this.own([i((()=>[this.viewModel?.activeMediaInfo,this.viewModel?.activeMediaInfoIndex]),(()=>this._setupMediaRefreshTimer()),r),i((()=>[this.viewModel?.description,this.viewModel?.title]),(()=>this._setupFeatureElementInfo()),r)])}destroy(){this._clearMediaRefreshTimer(),this._featureElementInfo.destroy()}render(){return v("div",{bind:this,class:M.base,onkeyup:this._handleMediaKeyup},this._featureElementInfo?.render(),this.renderMedia())}renderMedia(){const{formattedMediaInfoCount:e}=this.viewModel;return e?v("div",{key:"media-element-container",class:M.mediaContainer},this.renderMediaPageButton("previous"),this.renderMediaInfo(),this.renderMediaPageButton("next")):null}renderImageMediaInfo(e){const{_refreshIntervalInfo:t}=this,{activeMediaInfoIndex:i,formattedMediaInfoCount:r}=this.viewModel,{value:a,refreshInterval:o,altText:s,title:n,type:l}=e,{sourceURL:d,linkURL:c}=a,u=m(c)?"_blank":"_self",p="_blank"===u?"noreferrer":"",h=o?t:null,f=h?h.timestamp:0,_=h?h.sourceURL:d,M=v("img",{alt:s||n,key:`media-${l}-${i}-${r}-${f}`,src:_}),I=c?v("a",{title:n,href:c,rel:p,target:u},M):null;return I||M}renderChartMediaInfo(e){const{activeMediaInfoIndex:t,formattedMediaInfoCount:i}=this.viewModel;return v("div",{key:`media-${e.type}-${t}-${i}`,bind:this,class:M.mediaChart,afterCreate:this._getChartDependencies})}renderMediaInfoType(){const{activeMediaInfo:e}=this.viewModel;return e?"image"===e.type?this.renderImageMediaInfo(e):e.type.includes("chart")?this.renderChartMediaInfo(e):null:null}renderMediaInfo(){const{activeMediaInfo:e}=this.viewModel;if(!e)return null;const t=e.title?v("div",{key:"media-title",class:M.mediaItemTitle,innerHTML:e.title}):null,i=e.caption?v("div",{key:"media-caption",class:M.mediaItemCaption,innerHTML:e.caption}):null;return v("div",{key:"media-container",class:M.mediaItemContainer},v("div",{key:"media-item-container",class:M.mediaItem},this.renderMediaInfoType()),t,i)}renderMediaPageButton(e){if(this.viewModel.formattedMediaInfoCount<2)return null;const t="previous"===e,i=t?this.messages.previous:this.messages.next,r=t?this.classes(M.mediaButton,M.mediaPrevious):this.classes(M.mediaButton,M.mediaNext),a=t?this.classes(M.mediaIcon,M.mediaPreviousIconLTR,M.iconLeftTriangleArrow):this.classes(M.mediaIcon,M.mediaNextIconLTR,M.iconRightTriangleArrow),o=t?this.classes(M.mediaIcon,M.mediaPreviousIconRTL,M.iconRightTriangleArrow):this.classes(M.mediaIcon,M.mediaNextIconRTL,M.iconLeftTriangleArrow),s=t?"media-previous":"media-next",n=t?this._previous:this._next;return v("button",{type:"button",key:s,title:i,"aria-label":i,tabIndex:0,class:r,bind:this,onclick:n},v("span",{"aria-hidden":"true",class:a}),v("span",{"aria-hidden":"true",class:o}))}_setupFeatureElementInfo(){const{description:e,title:t}=this;this._featureElementInfo.set({description:e,title:t})}_next(){this.viewModel.next()}_previous(){this.viewModel.previous()}async _getRendererColors(e){const{am4core:t}=e,i=this.viewModel?.layer,r=new Map;if(!i)return r;const a=await n(i.renderer);a.delete(null);return Array.from(a.values()).every((e=>1===e?.length))?(r.set(T,t.color({r:50,g:50,b:50,a:1})),Array.from(a.keys()).forEach((e=>{e&&r.set(e,t.color(a.get(e)[0].toCss(!0)))})),r):r}_handleMediaKeyup(e){const i=t(e);"ArrowLeft"===i&&(e.stopPropagation(),this.viewModel.previous()),"ArrowRight"===i&&(e.stopPropagation(),this.viewModel.next())}_renderChart(e){const{abilities:t}=this.viewModel,{chartsModule:i,chartDiv:r,mediaInfo:a,colorMap:o}=e,{value:s,type:n}=a,{am4core:l}=i,d=p(l);function c(e){e instanceof l.ColorSet&&d&&(e.list=d)}_()&&l.useTheme(i.am4themes_dark);const m=window.matchMedia("(prefers-reduced-motion: reduce)");t.chartAnimation&&!m.matches?l.useTheme(i.am4themes_animated):l.unuseTheme(i.am4themes_animated),l.useTheme(c);const u="pie-chart"===n?this._createPieChart(e):this._createXYChart(e);r.setAttribute("aria-label",a.altText||a.title),u.data=s.series.map((e=>({[b]:e.tooltip,[C]:e.value,[g]:o.get(e.fieldName)}))).filter((e=>"pie-chart"!==n||e.value>0))}_customizeChartTooltip(e,t){e.label.wrap=!0,e.label.maxWidth=200,e.autoTextColor=!1,e.getFillFromObject=!1,e.label.fill=t.color("#ffffff"),e.background.fill=t.color({r:0,g:0,b:0,a:.7})}_createPieChart(e){const{chartDiv:t,chartsModule:i}=e,{am4core:r,am4charts:a}=i,o=r.create(t,a.PieChart);o.rtl=h(this.container);const s=o.series.push(new a.PieSeries);return s.labels.template.disabled=!0,s.ticks.template.disabled=!0,s.dataFields.value=C,s.dataFields.category=b,this._customizeChartTooltip(s.tooltip,r),s.slices.template.tooltipText=o.rtl?"{category}: %{value.percent.formatNumber('#.0')}":"{category}: {value.percent.formatNumber('#.0')}%",s.slices.template.propertyFields.fill=g,s.slices.template.propertyFields.stroke=g,o}_getMinSeriesValue(e){let t=0;return e.forEach((e=>t=Math.min(e.value,t))),t}_createColumnChart(e,t){const{chartsModule:i,mediaInfo:r}=t,{value:a}=r,{am4core:o,am4charts:s}=i,n=e.xAxes.push(new s.CategoryAxis);n.dataFields.category=b,n.renderer.labels.template.disabled=!0,this._customizeChartTooltip(n.tooltip,o),n.tooltip.events.on("sizechanged",(()=>{n.tooltip.dy=-n.tooltip.contentHeight}));const l=e.yAxes.push(new s.ValueAxis),d=l.renderer.labels.template;l.renderer.minLabelPosition=I,l.renderer.maxLabelPosition=y,l.min=this._getMinSeriesValue(a.series),this._customizeChartTooltip(l.tooltip,o),d.wrap=!0;const c=e.series.push(new s.ColumnSeries);c.dataFields.valueY=C,c.dataFields.categoryX=b,c.columns.template.propertyFields.fill=g,c.columns.template.propertyFields.stroke=g,e.cursor=new s.XYCursor,a.series.length>w&&(e.scrollbarX=new o.Scrollbar)}_createBarChart(e,t){const{chartsModule:i,mediaInfo:r}=t,{value:a}=r,{am4core:o,am4charts:s}=i,n=e.yAxes.push(new s.CategoryAxis);n.dataFields.category=b,n.renderer.inversed=!0,n.renderer.labels.template.disabled=!0,this._customizeChartTooltip(n.tooltip,o),n.tooltip.events.on("sizechanged",(()=>{n.tooltip.dx=n.tooltip.contentWidth}));const l=e.xAxes.push(new s.ValueAxis),d=l.renderer.labels.template;l.renderer.minLabelPosition=I,l.renderer.maxLabelPosition=y,l.min=this._getMinSeriesValue(a.series),this._customizeChartTooltip(l.tooltip,o),d.wrap=!0;const c=e.series.push(new s.ColumnSeries);c.dataFields.valueX=C,c.dataFields.categoryY=b,c.columns.template.propertyFields.fill=g,c.columns.template.propertyFields.stroke=g,e.cursor=new s.XYCursor,a.series.length>w&&(e.scrollbarY=new o.Scrollbar)}_createLineChart(e,t){const{chartsModule:i,mediaInfo:r,colorMap:a}=t,{value:o}=r,{am4core:s,am4charts:n}=i,l=e.xAxes.push(new n.CategoryAxis);l.dataFields.category=b,l.renderer.labels.template.disabled=!0,this._customizeChartTooltip(l.tooltip,s),l.tooltip.events.on("sizechanged",(()=>{l.tooltip.dy=-l.tooltip.contentHeight}));const d=e.yAxes.push(new n.ValueAxis),c=d.renderer.labels.template;d.renderer.minLabelPosition=I,d.renderer.maxLabelPosition=y,d.min=this._getMinSeriesValue(o.series),this._customizeChartTooltip(d.tooltip,s),c.wrap=!0;const m=e.series.push(new n.LineSeries);m.dataFields.categoryX=b,m.dataFields.valueY=C,m.strokeWidth=1;const u=a.get(T);u&&(m.stroke=u);const p=m.bullets.push(new n.CircleBullet);p.propertyFields.fill=g,p.propertyFields.stroke=g,e.cursor=new n.XYCursor,o.series.length>w&&(e.scrollbarX=new s.Scrollbar)}_createXYChart(e){const{chartDiv:t,chartsModule:i,mediaInfo:r}=e,{type:a}=r,{am4core:o,am4charts:s}=i,n=o.create(t,s.XYChart);return n.rtl=h(this.container),"column-chart"===a&&this._createColumnChart(n,e),"bar-chart"===a&&this._createBarChart(n,e),"line-chart"===a&&this._createLineChart(n,e),n}_clearMediaRefreshTimer(){const{_refreshTimer:e}=this;e&&(clearTimeout(e),this._refreshTimer=null)}_updateMediaInfoTimestamp(e){const t=Date.now();this._refreshIntervalInfo={timestamp:t,sourceURL:this._getImageSource(e,t)},this.scheduleRender()}_setupMediaRefreshTimer(){this._clearMediaRefreshTimer();const{activeMediaInfo:e}=this.viewModel;e&&"image"===e.type&&e.refreshInterval&&this._setRefreshTimeout(e)}_setRefreshTimeout(e){const{refreshInterval:t,value:i}=e;if(!t)return;const r=6e4*t;this._updateMediaInfoTimestamp(i.sourceURL);const a=setInterval((()=>{this._updateMediaInfoTimestamp(i.sourceURL)}),r);this._refreshTimer=a}_getImageSource(e,t){const i=e.includes("?")?"&":"?",[r,a=""]=e.split("#");return`${r}${i}timestamp=${t}${a?"#":""}${a}`}};e([a("viewModel.attributes")],x.prototype,"attributes",void 0),e([a("viewModel.activeMediaInfoIndex")],x.prototype,"activeMediaInfoIndex",void 0),e([a("viewModel.description")],x.prototype,"description",void 0),e([a("viewModel.fieldInfoMap")],x.prototype,"fieldInfoMap",void 0),e([a("viewModel.layer")],x.prototype,"layer",void 0),e([a("viewModel.mediaInfos")],x.prototype,"mediaInfos",void 0),e([a("viewModel.popupTemplate")],x.prototype,"popupTemplate",void 0),e([a("viewModel.relatedInfos")],x.prototype,"relatedInfos",void 0),e([a("viewModel.title")],x.prototype,"title",void 0),e([o({type:d})],x.prototype,"viewModel",void 0),e([o(),f("esri/widgets/Feature/t9n/Feature")],x.prototype,"messages",void 0),x=e([s("esri.widgets.Feature.FeatureMedia")],x);const F=x;export{F as default};