(this.webpackJsonptab_bar=this.webpackJsonptab_bar||[]).push([[0],{13:function(e,t,s){"use strict";s.r(t);var a=s(0),l=s.n(a),n=s(3),i=s.n(n),r=s(4),o=s.n(r),c=s(1);class d extends c.b{constructor(e){var t,s,a;super(e),this.state={numClicks:0,selectedId:1,list:[]},this.prevArgs=null,this.lastSentValue=null,this.MenuItem=e=>{let{item:t,selectedId:s}=e;const a=Number(s)===Number(t.id);return console.log("MenuItem ".concat(t.id,": selectedId=").concat(s,", item.id=").concat(t.id,", isActive=").concat(a)),l.a.createElement("div",{className:"menu-item ".concat(a?"active":""),onClick:()=>{console.log("MenuItem clicked:",t.id,t.title),this.onSelect(t.id)},style:{cursor:"pointer"}},l.a.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"}},"string"===typeof t.title&&t.title.startsWith("material:")?l.a.createElement("span",{className:"material-icons",style:{marginRight:"4px"}},t.title.replace("material:","")):t.title),l.a.createElement("div",{style:{fontWeight:"normal",fontStyle:"italic"}},t.description))},this.Arrow=e=>{let{text:t,className:s}=e;return l.a.createElement("div",{className:s},t)},this.ArrowLeft=this.Arrow({text:"<",className:"arrow-prev"}),this.ArrowRight=this.Arrow({text:">",className:"arrow-next"}),this.render=()=>(console.log("TabBar render - current state:",this.state),l.a.createElement("div",null,l.a.createElement(o.a,{alignCenter:!1,data:this.Menu(this.state.list,this.state.selectedId),wheel:!0,scrollToSelected:!0,selected:"".concat(this.state.selectedId),onSelect:this.onSelect}))),this.onSelect=e=>{const t=Number(e);console.log("onSelect called with id:",e,"-> numericId:",t,"type:",typeof e),this.setState(()=>(console.log("Setting state, new selectedId:",t),{selectedId:t}),()=>{this.lastSentValue!==t&&(this.lastSentValue=t,console.log("onSelect: sending to Streamlit:",t),c.a.setComponentValue(t))})},console.log("TabBar constructor - props:",e);const n=e.args||{},i=Array.isArray(n.data)&&n.data.length>0?n.data:[{id:0,title:"material:add",description:"New Tab"}],r=Number(null!==(t=null!==(s=n.selectedId)&&void 0!==s?s:null===(a=i[0])||void 0===a?void 0:a.id)&&void 0!==t?t:0);this.state={numClicks:0,selectedId:r,list:i},this.prevArgs=n,console.log("TabBar constructor - initial state:",this.state),"undefined"!==typeof n.selectedId&&(this.lastSentValue=r,c.a.setComponentValue(r))}componentDidUpdate(){const e=this.props.args||{},t=this.prevArgs||{};if(t.data!==e.data||String(t.selectedId)!==String(e.selectedId)){var s,a,l;const t=Array.isArray(e.data)?e.data:this.state.list,n=Number(null!==(s=null!==(a=e.selectedId)&&void 0!==a?a:null===(l=t[0])||void 0===l?void 0:l.id)&&void 0!==s?s:this.state.selectedId);console.log("componentDidUpdate: updating state from props.args:",{selectedId:n,data:t}),this.setState({list:t,selectedId:n},()=>{this.lastSentValue!==n&&(console.log("componentDidUpdate: sending selectedId to Streamlit:",n),this.lastSentValue=n,c.a.setComponentValue(n))})}this.prevArgs=e}Menu(e,t){return e.map(e=>l.a.createElement(this.MenuItem,{item:e,selectedId:t,key:e.id}))}}var m=Object(c.c)(d);i.a.render(l.a.createElement(l.a.StrictMode,null,l.a.createElement(m,null)),document.getElementById("root"))},6:function(e,t,s){e.exports=s(13)}},[[6,1,2]]]);