import t from"@babel/runtime/helpers/toConsumableArray";import{useRef as e,useEffect as i}from"react";import r from"prop-types";import{jsx as l}from"react/jsx-runtime";var h="#239FE6",c="#085EDF",a="#C208DF",n="yellow",o="#8398A5",s="#dd375e",f="#44ff44";function p(r){var p=r.schematic,u=r.containerWidth,y=r.containerHeight,d=e(),m=e();i((function(){var e=d.current,i=e.getContext("2d"),r=m.current,l=r.clientWidth,u=r.clientHeight;e.width=l-8,e.height=u,e.style.width="".concat(l-8,"px"),e.style.height="".concat(u,"px");var y=p.filter((function(t){return["bit","stabilizer","ur"].includes(t.family)})).length,g=p.filter((function(t){return["pdm","rss"].includes(t.family)})).length,b=(l-6*y)/(p.filter((function(t){return"other"===t.family})).length+2*g),x=[],w=0;t(p).reverse().forEach((function(t){var e=0;switch(e=["bit","stabilizer","ur"].includes(t.family)?6:["pdm","rss"].includes(t.family)?2*b:b,t.family){case"bit":x.push({type:"rect",x:w,y:u/2-6,width:e,height:12,fillColor:"pdc"===t.bitType?h:c});break;case"ur":x.push({type:"rect",x:w,y:u/2-6,width:e,height:12,fillColor:f});break;case"pdm":t.hasStabilizer?x.push({type:"rect",x:w+(e/2-3),y:u/2-6,width:6,height:12,fillColor:n},{type:"rect",x:w,y:u/2-2,width:e,height:4,fillColor:a}):x.push({type:"rect",x:w,y:u/2-2,width:e,height:4,fillColor:a});break;case"rss":x.push({type:"rect",x:w,y:u/2-2,width:e,height:4,fillColor:s});break;case"stabilizer":x.push({type:"rect",x:w,y:u/2-6,width:e,height:12,fillColor:n});break;case"other":x.push({type:"rect",x:w,y:u/2-2,width:e,height:4,fillColor:o})}w+=e})),x.forEach((function(t){i.fillStyle=t.fillColor,i.fillRect(t.x,t.y,t.width,t.height)}))}));var g={width:u?"".concat(u,"px"):"100%",height:y?"".concat(y,"px"):"100%"};return l("div",{ref:m,style:g,children:l("canvas",{ref:d})})}p.propTypes={containerWidth:r.number,containerHeight:r.number,schematic:r.arrayOf(r.shape({})).isRequired},p.defaultProps={containerWidth:null,containerHeight:null};export{p as default};
