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 d,createStyle as t,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 F,createContainerStyles as S,createWrapContentWidthStyles as h,createContentWithStyles as k,createIconContainerStyles as q,createIconContentStyles as w}from"./common/style.js";import{getInputAttr as O}from"./common/attr.js";import{removeHoverStyles as x,getDisplayText as R}from"./common/helpers.js";let FileUpload=({setting:I,styles:P,builderProps:U,pageContext:C})=>{let J=d(v(I,U?.uid)),L=t({...x(E(I,P),P?.enableHoverEffect)}),N=d(f(P)),V=t({...x(H(P),P?.enableHoverEffect)}),_=d(m()),z=d(p()),A=d($()),B=d(n()),D=t(F()),G=d(u()),K=d(g()),M=d(y("gp-flex gp-items-center")),Q=o({...O(I?.isRequired,I?.numberOfFiles)}),T=t({...x(S(P?.align,P?.textColor),P?.enableHoverEffect)}),W=t({...x(h(I),P?.enableHoverEffect)}),X=d(b(U?.uid)),Y=t({...x(k(I,P),P?.enableHoverEffect)}),Z=t({...x(q(I),P?.enableHoverEffect)}),ee=d(j()),es=t({...x(w(I,P),P?.enableHoverEffect)}),ei=R("Liquid",{uid:U?.uid,setting:I,styles:P,pageContext:C}),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="${J}" style="${L}">
      ${c(!!(I?.iconSvg&&I?.iconVisible),e`
            <div class='${M}' style="${Z}">
              <div class="${ee}" style="${es}">
                ${I?.iconSvg}
              </div>
            </div>
          `)}
          <div class="${N}" 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{FileUpload as default};
