import{Flex as h,Spinner as L,Text as g}from"@chakra-ui/react";import O from"@emotion/styled";import"react";import{useEffect as m,useState as A}from"react";import x from"@emotion/styled";import{AddIcon as G,MinusIcon as H}from"@chakra-ui/icons";import{Box as V,Button as q,Flex as N,Text as P}from"@chakra-ui/react";import k from"react";import{createMultiStyleConfigHelpers as B,defineStyle as _,FormControl as $,Input as v,InputGroup as R,Text as p}from"@chakra-ui/react";import{inputAnatomy as D}from"@chakra-ui/anatomy";import{jsx as u,jsxs as w}from"react/jsx-runtime";var z=k.forwardRef(({label:e,error:t,placeholder:d,helperText:o,isInvalid:n,as:r=v,InputLeftAddon:i,InputRightAddon:y,...f},C)=>{let{disabled:s}=f;return w($,{isInvalid:n,opacity:s?.4:1,children:[e&&u(p,{color:n?"destructive":"foreground",fontWeight:"medium",fontSize:"sm",lineHeight:1,children:e}),w(R,{mt:"2",children:[i,u(r,{variant:"",placeholder:d,...f,ref:C}),y]}),o&&u(p,{fontSize:"xs",mt:2,color:"mutedForeground",children:o}),n&&t&&u(p,{fontSize:"xs",mt:2,color:"destructive",children:t})]})}),{definePartsStyle:F,defineMultiStyleConfig:W}=B(D.keys),E=F({field:{color:"foreground",background:"background",boxShadow:"base",borderWidth:"1px",borderStyle:"solid",borderColor:"input",borderRadius:"lg",_focusVisible:{borderColor:"ring"},_hover:{},_disabled:{opacity:1},_placeholder:{color:"mutedForeground"}}}),M=_({borderRadius:"md"}),j={sm:F({field:M})},oe=W({baseStyle:E,sizes:j});import{jsx as l,jsxs as a}from"react/jsx-runtime";var Y=x(V)`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  height: 40px;
  border-radius: 12px;
`,T=x(q)`
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 32px;
  width: 32px;
  //border-radius: 12px;
  //border: none;
  //border: 1px solid ${e=>e.theme.colors.border};
  pointer-events: ${e=>e.disabled?"none":"unset"};
  opacity: ${e=>e.disabled?"0.5":"1"};

  &:active {
    border: 1px solid ${e=>e.theme.colors.foreground};
  }

  svg {
    path {
      fill: ${e=>e.theme.colors.foreground};
    }
  }
`,J=x(z)`
  justify-content: center;
  font-size: 18px;
  min-width: 60px;
  user-select: none;
  border: none;
  box-shadow: none;
  max-width: 80px;
  text-align: center;
`,K=({initialState:e=1,maxState:t,onChange:d,value:o,onError:n})=>{let[r,i]=A(e);return m(()=>{d(r)},[r]),m(()=>{i(e)},[e]),m(()=>{t>0&&o>t||r<1?n(!0):n(!1)},[t,o,r]),a(N,{flexDirection:"column",alignItems:"flex-end",children:[a(Y,{children:[l(T,{variant:"outline",onClick:()=>{o>e&&i(s=>o-1)},disabled:o===1,children:l(H,{})}),l(J,{value:o,onChange:s=>{let I=Number(s.target.value);i(I)}}),l(T,{variant:"outline",onClick:()=>{t?o<t&&i(s=>o+1):i(s=>o+1)},disabled:t===o||!t,children:l(G,{})})]}),(t>0&&o>t||r<1)&&a(P,{fontSize:12,mt:10,color:"#E11900",children:["Enter quantity between 1 to ",t]})]})},S=K;import{jsx as c,jsxs as b}from"react/jsx-runtime";var Q=O(h)`
  position: relative;
`,U=({duration:e,setDuration:t,loading:d,subTotalPrice:o,payUsing:n})=>b(Q,{paddingY:4,flexDir:"column",alignItems:"center",children:[c(S,{initialState:1,maxState:1e4,onChange:t,onError:()=>{},value:e}),b(h,{w:"full",justifyContent:"space-between",alignItems:"center",children:[c(g,{fontSize:14,mt:4,fontWeight:"bold",children:`${e} year registration`}),b(h,{alignItems:"flex-end",justifyContent:"center",mt:4,children:[d?c(L,{size:"xs",mb:"1.5"}):c(g,{fontSize:14,fontWeight:"bold",children:`${o?.toFixed(5)}`}),c(g,{ml:"1",fontSize:14,fontWeight:"bold",children:n?.ticker})]})]})]}),be=U;export{be as default};
