---
import type { QuickshellSignal } from "@config/io/types";
import { Tag, PowerCord } from "@icons";
import TypeDetails from "./TypeDetails.astro";
import TypeTitle from "./TypeTitle.astro";

export interface Props {
  signalKeys: string[];
  signalsData: QuickshellSignal;
}

const { signalKeys, signalsData } = Astro.props;
---
<ul class="typedata typesignals">
  {
    signalKeys.map(item => {
      const signalData = signalsData[item];
      const paramKeys = signalData.params.length > 0 ? signalData.params.map((param,index) => `${param.name}${index !== signalData.params.length -1 ? ", ":""}`) : []
      let genericType:string|undefined;
      let genericTypeLink:string|undefined;
      return (
        <li id={ item } class="typedata-root typesignal-root">
          <TypeTitle
            typekind="signal"
            typename={item}
            typelink="/docs/configuration/qml-overview#-signals"
            typelink_text={"?"}
            typename_generic={genericType}
            typelink_generic={genericTypeLink}
            typedata_params={paramKeys}
          />
          {
            signalData.params && signalData.params.length > 0 ? (
              <p class="typedata-params typesignal-params">
                {
                  signalData.params.map((param, _) => {
                    return (
                    <span class="typedata-param typesignal-param">
                      <Tag client:idle/>
                      {param.name}<span class="type-datatype">:&nbsp;<a
                        href=""
                        target="_blank"
                      >{param.type.name}</a></span>
                    </span>
                    )
                  })
                }
              </p>
            ) : null
          }
          <TypeDetails markdown={signalData.details} />
        </li>
      )
    })
  }
</ul>