window.Webflow ||= [];
window.Webflow.push(() => {
  // Define a type for the slice objects
  type Slice = {
    color: string;
    url: string;
    label: string;
  };

  // TypeScript version of the calculatePathPoints function
  function calculatePathPoints(
    cx: number,
    cy: number,
    radius: number,
    angle: number
  ): { x: number; y: number } {
    const rad = (angle: number): number => (Math.PI / 180) * angle;
    const x = cx + radius * Math.cos(rad(angle));
    const y = cy + radius * Math.sin(rad(angle));
    return { x, y };
  }

  // TypeScript version of the createDoughnutChart function
  function createDoughnutChart(
    containerId: string,
    slices: Slice[],
    outerRadius: number,
    innerRadius: number
  ): void {
    const svgns = 'http://www.w3.org/2000/svg';
    const chart = document.createElementNS(svgns, 'svg');
    const defs = document.createElementNS(svgns, 'defs');
    const style = document.createElement('style');
    style.textContent = `
    .chart_slice-link path {
        transition: all 0.2s ease;
    }

      .chart_slice-link path:hover {
        fill: rgba(255, 165, 0, 0.25); /* 50% opacity orange */
      }
    `;
    defs.appendChild(style);
    chart.appendChild(defs);

    const center = outerRadius; // Assuming the center is at the outer radius
    let angle = -90;
    const step = 360 / slices.length;

    slices.forEach((slice: Slice, index: number) => {
      // Slice creation
      const aElement = document.createElementNS(svgns, 'a');
      aElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', slice.url);
      aElement.setAttribute('class', 'chart_slice-link');

      const path = document.createElementNS(svgns, 'path');
      const endAngle = angle + step;
      const outerStart = calculatePathPoints(center, center, outerRadius, angle);
      const outerEnd = calculatePathPoints(center, center, outerRadius, endAngle);
      const innerStart = calculatePathPoints(center, center, innerRadius, endAngle);
      const innerEnd = calculatePathPoints(center, center, innerRadius, angle);
      const largeArcFlag = endAngle - angle > 180 ? 1 : 0;
      const pathData = [
        `M ${outerStart.x},${outerStart.y}`,
        `A ${outerRadius},${outerRadius} 0 ${largeArcFlag} 1 ${outerEnd.x},${outerEnd.y}`,
        `L ${innerStart.x},${innerStart.y}`,
        `A ${innerRadius},${innerRadius} 0 ${largeArcFlag} 0 ${innerEnd.x},${innerEnd.y}`,
        'Z',
      ].join(' ');

      path.setAttribute('d', pathData);
      path.setAttribute('fill', 'rgba(255, 152, 0, 0)');
      path.setAttribute('stroke', 'var(--content--contentbrandcolor)');
      path.setAttribute('stroke-width', '2');
      path.setAttribute('style', 'cursor: pointer;');
      aElement.appendChild(path);
      chart.appendChild(aElement);

      // Calculate midpoint for the label
      const labelAngle = angle + step / 2;
      const labelRadius = (outerRadius + innerRadius) / 2;
      const labelPosition = calculatePathPoints(center, center, labelRadius, labelAngle);
      const textElement = document.createElementNS(svgns, 'text');
      textElement.setAttribute('x', labelPosition.x.toString());
      textElement.setAttribute('y', labelPosition.y.toString());
      textElement.setAttribute('text-anchor', 'middle');
      textElement.setAttribute('alignment-baseline', 'middle');
      textElement.setAttribute('fill', '#ff9800');
      textElement.setAttribute('class', 'chart_slice-text');
      textElement.textContent = slice.label;
      aElement.appendChild(textElement);

      angle += step;
    });

    chart.setAttribute('viewBox', `0 0 ${outerRadius * 2} ${outerRadius * 2}`);
    chart.setAttribute('class', 'chart-svg');
    chart.setAttribute('width', (outerRadius * 2).toString());
    chart.setAttribute('height', (outerRadius * 2).toString());
    document.querySelector(`[el="${containerId}"]`)?.appendChild(chart);
  }

  // Example usage with slices defined
  const slices: Slice[] = [
    {
      color: 'var(--content--contentbrandcolor)',
      url: '/uber-uns',
      label: 'Konzepte',
    },
    {
      color: '#FFA256',
      url: '/events',
      label: 'Events',
    },
    {
      color: '#2DA256',
      url: '/bar-catering',
      label: 'Bar catering',
    },
  ];

  const outerRadius = 350;
  const innerRadius = 116;

  createDoughnutChart('navigation-chart', slices, outerRadius, innerRadius);
});

// window.Webflow ||= [];
// window.Webflow.push(() => {
//   // Define a type for the slice objects
//   type Slice = {
//     color: string;
//     image: string;
//     url: string;
//     label: string;
//   };

//   // TypeScript version of the calculatePathPoints function
//   function calculatePathPoints(
//     cx: number,
//     cy: number,
//     radius: number,
//     angle: number
//   ): { x: number; y: number } {
//     const rad = (angle: number): number => (Math.PI / 180) * angle;
//     const x = cx + radius * Math.cos(rad(angle));
//     const y = cy + radius * Math.sin(rad(angle));
//     return { x, y };
//   }

//   // TypeScript version of the createDoughnutChart function
//   function createDoughnutChart(
//     containerId: string,
//     slices: Slice[],
//     outerRadius: number,
//     innerRadius: number
//   ): void {
//     const svgns = 'http://www.w3.org/2000/svg';
//     const chart = document.createElementNS(svgns, 'svg');
//     const defs = document.createElementNS(svgns, 'defs');
//     chart.appendChild(defs);

//     const center = outerRadius; // Assuming the center is at the outer radius
//     let angle = -90;
//     const step = 360 / slices.length;

//     slices.forEach((slice: Slice, index: number) => {
//       const pattern = document.createElementNS(svgns, 'pattern');
//       const patternId = `pattern-${index}`;
//       pattern.setAttribute('id', patternId);
//       pattern.setAttribute('patternUnits', 'userSpaceOnUse');
//       pattern.setAttribute('width', (outerRadius / 1).toString());
//       pattern.setAttribute('height', (outerRadius / 1).toString());
//       // pattern.setAttribute('patternUnits', 'objectBoundingBox');s
//       // pattern.setAttribute('width', '1');
//       // pattern.setAttribute('height', '1');

//       const image = document.createElementNS(svgns, 'image');
//       image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', slice.image);
//       image.setAttribute('x', '0');
//       image.setAttribute('y', '0');
//       image.setAttribute('width', (outerRadius / 1).toString());
//       image.setAttribute('height', (outerRadius / 1).toString());
//       image.setAttribute('preserveAspectRatio', 'xMidYMid slice');
//       // image.setAttribute('width', '1');
//       // image.setAttribute('height', '1');
//       // image.setAttribute('preserveAspectRatio', 'xMidYMid meet');

//       pattern.appendChild(image);
//       defs.appendChild(pattern);

//       // Slice creation
//       const aElement = document.createElementNS(svgns, 'a');
//       aElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', slice.url);

//       const path = document.createElementNS(svgns, 'path');
//       const endAngle = angle + step;
//       const outerStart = calculatePathPoints(center, center, outerRadius, angle);
//       const outerEnd = calculatePathPoints(center, center, outerRadius, endAngle);
//       const innerStart = calculatePathPoints(center, center, innerRadius, endAngle);
//       const innerEnd = calculatePathPoints(center, center, innerRadius, angle);
//       const largeArcFlag = endAngle - angle > 180 ? 1 : 0;
//       const pathData = [
//         `M ${outerStart.x},${outerStart.y}`,
//         `A ${outerRadius},${outerRadius} 0 ${largeArcFlag} 1 ${outerEnd.x},${outerEnd.y}`,
//         `L ${innerStart.x},${innerStart.y}`,
//         `A ${innerRadius},${innerRadius} 0 ${largeArcFlag} 0 ${innerEnd.x},${innerEnd.y}`,
//         'Z',
//       ].join(' ');

//       path.setAttribute('d', pathData);
//       // path.setAttribute('fill', slice.color);
//       path.setAttribute('fill', slice.image ? `url(#${patternId})` : slice.color);
//       path.setAttribute('stroke', 'var(--content--contentbrandcolor)');
//       path.setAttribute('stroke-width', '2');
//       path.setAttribute('style', 'cursor: pointer;');
//       aElement.appendChild(path);
//       chart.appendChild(aElement);

//       // Calculate midpoint for the label
//       const labelAngle = angle + step / 2;
//       const labelRadius = (outerRadius + innerRadius) / 2;
//       const labelPosition = calculatePathPoints(center, center, labelRadius, labelAngle);
//       const textElement = document.createElementNS(svgns, 'text');
//       textElement.setAttribute('x', labelPosition.x.toString());
//       textElement.setAttribute('y', labelPosition.y.toString());
//       textElement.setAttribute('text-anchor', 'middle');
//       textElement.setAttribute('alignment-baseline', 'middle');
//       textElement.setAttribute('fill', 'white'); // Adjust text color as needed
//       textElement.textContent = slice.label; // Replace with your label text as needed
//       aElement.appendChild(textElement);

//       angle += step;
//     });

//     chart.setAttribute('viewBox', `0 0 ${outerRadius * 2} ${outerRadius * 2}`);
//     chart.setAttribute('width', (outerRadius * 2).toString());
//     chart.setAttribute('height', (outerRadius * 2).toString());
//     document.querySelector(`[el="${containerId}"]`)?.appendChild(chart);
//   }

//   // Example usage with slices defined
//   const slices: Slice[] = [
//     {
//       color: 'var(--content--contentbrandcolor)',
//       image:
//         'https://uploads-ssl.webflow.com/61cc868070316902ea8265b0/66141752516f26d7ac18da10_slice-konzepte.webp',
//       url: 'https://example.com/link1',
//       label: 'Konzepte',
//     },
//     {
//       color: '#36A2EB',
//       image:
//         'https://uploads-ssl.webflow.com/61cc868070316902ea8265b0/6614175ae66c5d373f42003f_slice-vermietung.webp',
//       url: 'https://example.com/link2',
//       label: 'Vermietung',
//     },
//     {
//       color: '#FFCE56',
//       image:
//         'https://uploads-ssl.webflow.com/61cc868070316902ea8265b0/6614175f59b63feef25bf452_slice-buckets.webp',
//       url: 'https://example.com/link3',
//       label: 'Buckets',
//     },
//     {
//       color: '#FFA256',
//       image:
//         'https://uploads-ssl.webflow.com/61cc868070316902ea8265b0/6614176585d114e7bd1db064_slice-events.webp',
//       url: 'https://example.com/link3',
//       label: 'Events',
//     },
//     {
//       color: '#2DA256',
//       image:
//         'https://uploads-ssl.webflow.com/61cc868070316902ea8265b0/6614176b3d4d9a55500f427b_slice-catering.webp',
//       url: 'https://example.com/link3',
//       label: 'Bar catering',
//     },
//     // Add more slices as needed
//   ];

//   console.log('ewr');
//   createDoughnutChart('navigation-chart', slices, 350, 150);
// });