import{j as e}from"./jsx-runtime-Dfk2JFgj.js";import{r as p}from"./index-CWN_QRa1.js";import{a as u}from"./index-B-lxVbXh.js";import{o as c,p as a,q as t}from"./index-DNsi8NHw.js";import"./index-CIVavKlu.js";import"./CheckGroup-BpaEcK_0.js";import"./index-Cj3pldWQ.js";import"./index-DgIb9kCw.js";import"./index-DllfNvuz.js";import"./index-6WYjB5r3.js";import{M as h}from"./MockData-JoECteJq.js";import"./v4-CtRu48qb.js";import"./DefaultPropsProvider-BPu7lNPC.js";import"./index-Bk93qgka.js";import"./index-DnVHLn3F.js";import"./tiny-invariant-CopsF_GD.js";import"./iframe-BT4Dhm0c.js";const P={title:"Components/InlineTags",component:c},C=s=>{const[o,r]=p.useState([]),l=n=>{r(n),u("onChange")(n)};return e.jsxs(a,{children:[e.jsx(t,{variant:"h6",gutterBottom:!0,children:"Tags Inline con Jerarquía"}),e.jsx(t,{variant:"body2",color:"text.secondary",gutterBottom:!0,children:"Los tags padre se muestran con peso de fuente normal y los hijos con un peso más ligero e indentados."}),e.jsx(a,{mt:2,p:2,border:"1px solid #ddd",borderRadius:1,children:e.jsx(c,{...s,tags:h,value:o,onChange:l})}),e.jsxs(a,{mt:3,children:[e.jsxs(t,{variant:"subtitle1",gutterBottom:!0,children:["Tags seleccionados: ",o.length]}),e.jsx(a,{component:"pre",sx:{backgroundColor:"#f5f5f5",padding:2,borderRadius:1,overflow:"auto",maxHeight:300},children:JSON.stringify(o.map(n=>({id:n.id,label:n.label})),null,2)})]})]})},d=C.bind({});d.args={disabled:!1};const i=s=>{const[o,r]=p.useState([{id:31052,label:"QA    Testing",color:"5243AA",name:"Tag",path:""}]),l=n=>{r(n),u("onChange")(n)};return e.jsxs(a,{children:[e.jsx(t,{variant:"h6",gutterBottom:!0,children:"Tags Inline Deshabilitados"}),e.jsx(t,{variant:"body2",color:"text.secondary",gutterBottom:!0,children:"Todos los checkboxes están deshabilitados. El componente tiene un tag preseleccionado."}),e.jsx(a,{mt:2,p:2,border:"1px solid #ddd",borderRadius:1,children:e.jsx(c,{...s,tags:h,value:o,onChange:l,disabled:!0})}),e.jsxs(a,{mt:3,children:[e.jsxs(t,{variant:"subtitle1",gutterBottom:!0,children:["Tags seleccionados: ",o.length]}),e.jsx(a,{component:"pre",sx:{backgroundColor:"#f5f5f5",padding:2,borderRadius:1,overflow:"auto",maxHeight:300},children:JSON.stringify(o.map(n=>({id:n.id,label:n.label})),null,2)})]})]})},g=s=>{const[o,r]=p.useState([{id:30797,label:"BR  qa",color:"2584FF",name:"Tag",path:"QA    Testing"},{id:30795,label:"BR-test005",color:"018759",name:"Tag",path:"QA    Testing"}]),l=n=>{r(n),u("onChange")(n)};return e.jsxs(a,{children:[e.jsx(t,{variant:"h6",gutterBottom:!0,children:"Tags Inline con Preselección"}),e.jsx(t,{variant:"body2",color:"text.secondary",gutterBottom:!0,children:"El componente inicia con algunos tags ya seleccionados."}),e.jsx(a,{mt:2,p:2,border:"1px solid #ddd",borderRadius:1,children:e.jsx(c,{...s,tags:h,value:o,onChange:l})}),e.jsxs(a,{mt:3,children:[e.jsxs(t,{variant:"subtitle1",gutterBottom:!0,children:["Tags seleccionados: ",o.length]}),e.jsx(a,{component:"pre",sx:{backgroundColor:"#f5f5f5",padding:2,borderRadius:1,overflow:"auto",maxHeight:300},children:JSON.stringify(o.map(n=>({id:n.id,label:n.label})),null,2)})]})]})};i.__docgenInfo={description:"",methods:[],displayName:"Disabled"};g.__docgenInfo={description:"",methods:[],displayName:"WithPreselectedTags"};var m,T,x;d.parameters={...d.parameters,docs:{...(m=d.parameters)==null?void 0:m.docs,source:{originalSource:`args => {
  const [selectedTags, setSelectedTags] = useState<any[]>([]);
  const handleChange = (newValue: any[]) => {
    setSelectedTags(newValue);
    action("onChange")(newValue);
  };
  return <Box>
      <Typography variant="h6" gutterBottom>
        Tags Inline con Jerarquía
      </Typography>
      <Typography variant="body2" color="text.secondary" gutterBottom>
        Los tags padre se muestran con peso de fuente normal y los hijos con un peso más ligero e indentados.
      </Typography>
      <Box mt={2} p={2} border="1px solid #ddd" borderRadius={1}>
        <InlineTags {...args} tags={MockTags as Tag[]} value={selectedTags} onChange={handleChange} />
      </Box>
      <Box mt={3}>
        <Typography variant="subtitle1" gutterBottom>
          Tags seleccionados: {selectedTags.length}
        </Typography>
        <Box component="pre" sx={{
        backgroundColor: "#f5f5f5",
        padding: 2,
        borderRadius: 1,
        overflow: "auto",
        maxHeight: 300
      }}>
          {JSON.stringify(selectedTags.map(tag => ({
          id: tag.id,
          label: tag.label
        })), null, 2)}
        </Box>
      </Box>
    </Box>;
}`,...(x=(T=d.parameters)==null?void 0:T.docs)==null?void 0:x.source}}};var y,b,B;i.parameters={...i.parameters,docs:{...(y=i.parameters)==null?void 0:y.docs,source:{originalSource:`args => {
  const [selectedTags, setSelectedTags] = useState<any[]>([{
    id: 31052,
    label: "QA    Testing",
    color: "5243AA",
    name: "Tag",
    path: ""
  }]);
  const handleChange = (newValue: any[]) => {
    setSelectedTags(newValue);
    action("onChange")(newValue);
  };
  return <Box>
      <Typography variant="h6" gutterBottom>
        Tags Inline Deshabilitados
      </Typography>
      <Typography variant="body2" color="text.secondary" gutterBottom>
        Todos los checkboxes están deshabilitados. El componente tiene un tag preseleccionado.
      </Typography>
      <Box mt={2} p={2} border="1px solid #ddd" borderRadius={1}>
        <InlineTags {...args} tags={MockTags as Tag[]} value={selectedTags} onChange={handleChange} disabled={true} />
      </Box>
      <Box mt={3}>
        <Typography variant="subtitle1" gutterBottom>
          Tags seleccionados: {selectedTags.length}
        </Typography>
        <Box component="pre" sx={{
        backgroundColor: "#f5f5f5",
        padding: 2,
        borderRadius: 1,
        overflow: "auto",
        maxHeight: 300
      }}>
          {JSON.stringify(selectedTags.map(tag => ({
          id: tag.id,
          label: tag.label
        })), null, 2)}
        </Box>
      </Box>
    </Box>;
}`,...(B=(b=i.parameters)==null?void 0:b.docs)==null?void 0:B.source}}};var f,v,j;g.parameters={...g.parameters,docs:{...(f=g.parameters)==null?void 0:f.docs,source:{originalSource:`args => {
  const [selectedTags, setSelectedTags] = useState<any[]>([{
    id: 30797,
    label: "BR  qa",
    color: "2584FF",
    name: "Tag",
    path: "QA    Testing"
  }, {
    id: 30795,
    label: "BR-test005",
    color: "018759",
    name: "Tag",
    path: "QA    Testing"
  }]);
  const handleChange = (newValue: any[]) => {
    setSelectedTags(newValue);
    action("onChange")(newValue);
  };
  return <Box>
      <Typography variant="h6" gutterBottom>
        Tags Inline con Preselección
      </Typography>
      <Typography variant="body2" color="text.secondary" gutterBottom>
        El componente inicia con algunos tags ya seleccionados.
      </Typography>
      <Box mt={2} p={2} border="1px solid #ddd" borderRadius={1}>
        <InlineTags {...args} tags={MockTags as Tag[]} value={selectedTags} onChange={handleChange} />
      </Box>
      <Box mt={3}>
        <Typography variant="subtitle1" gutterBottom>
          Tags seleccionados: {selectedTags.length}
        </Typography>
        <Box component="pre" sx={{
        backgroundColor: "#f5f5f5",
        padding: 2,
        borderRadius: 1,
        overflow: "auto",
        maxHeight: 300
      }}>
          {JSON.stringify(selectedTags.map(tag => ({
          id: tag.id,
          label: tag.label
        })), null, 2)}
        </Box>
      </Box>
    </Box>;
}`,...(j=(v=g.parameters)==null?void 0:v.docs)==null?void 0:j.source}}};const F=["Default","Disabled","WithPreselectedTags"];export{d as Default,i as Disabled,g as WithPreselectedTags,F as __namedExportsOrder,P as default};
