import{template as e,RenderIf as s,isLocalEnv as i,baseAssetURL as l}from"@gem-sdk/core";import{getSettingPreloadData as r}from"../../../helpers.js";import{createClass as t,createStyle as d,createAttr as o,createStateOrContext as a,If as c}from"@gem-sdk/system";import{createLayoutClasses as v,createTypoClasses as f,createPreviewClasses as m,createPreviewItemClasses as p,createPreviewRemoveClasses as $,createMessageClasses as n,createContentWidthClasses as u,createInputClasses as g,composeClasses as y,createWrapContainerClasses as b,createIconContentClasses as j}from"./common/classes.js";import{createLayoutStyles as E,createTypoStyles as H,createMessageStyles as S,createContainerStyles as h,createWrapContentWidthStyles as k,createContentWithStyles as q,createIconContainerStyles as w,createIconContentStyles as F}from"./common/style.js";import{getInputAttr as O}from"./common/attr.js";import{removeHoverStyles as x,getDisplayText as R}from"./common/helpers.js";let I=({setting:I,styles:P,builderProps:C,pageContext:J})=>{let L=t(v(I,C?.uid)),N=d({...x(E(I,P),P?.enableHoverEffect)}),U=t(f(P)),V=d({...x(H(P),P?.enableHoverEffect)}),_=t(m()),z=t(p()),A=t($()),B=t(n()),D=d(S()),G=t(u()),K=t(g()),M=t(y("gp-flex gp-items-center")),Q=o({...O(I?.isRequired,I?.numberOfFiles)}),T=d({...x(h(P?.align,P?.textColor),P?.enableHoverEffect)}),W=d({...x(k(I),P?.enableHoverEffect)}),X=t(b(C?.uid)),Y=d({...x(q(I,P),P?.enableHoverEffect)}),Z=d({...x(w(I),P?.enableHoverEffect)}),ee=t(j()),es=d({...x(F(I,P),P?.enableHoverEffect)}),ei=R("Liquid",{uid:C?.uid,setting:I,styles:P,pageContext:J}),el=a({settings:{isShowPreviewImage:I?.isShowPreviewImage,numberOfFiles:I?.numberOfFiles,isRequired:I?.isRequired}});return e`
  <gp-file-upload
    gp-data='${JSON.stringify(el)}'
  >
  <div class="${X}" style="${T}">
    <input ${Q} class="${K}">
    <div class="${M}" style="${W}">
      <div class="${G}" style="${Y}">
        <div class="${L}" style="${N}">
      ${c(!!(I?.iconSvg&&I?.iconVisible),e`
            <div class='${M}' style="${Z}">
              <div class="${ee}" style="${es}">
                ${I?.iconSvg}
              </div>
            </div>
          `)}
          <div class="${U}" style="${V}">
            ${ei}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="${_}">
    <div class="${z}">
    <div class="${A}"></div>
    </div>
  </div>
  <div class="${B}" style="${D}"></div>
  </gp-file-upload>

  ${s(i,`<script ${r('class="gps-link" delay',"src")}="{{ 'gp-file-upload-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${r('class="gps-link" delay',"src")}="${l}/assets-v2/gp-file-upload-v7-5.js" defer="defer"></script>`)}
  `};export{I as default};
