/**
 * 钝角三角形
 * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <polygon points="20,20 80,80 35,65" stroke="#141414" stroke-width="1" fill="#ff0000"/>
</svg>
 * 
 */

interface ShapeCard {
    id: string;
    name: string;
    type: string;
    svg: string;
    svgDataUrl?: string;
    fillColor: string;
    drawFunction?: string;
    checked?: boolean;
}

const SHAPES: ShapeCard[] = [
    // 三角形
    {
        id: 'obtuse-triangle',
        name: '钝角三角形',
        type: 'triangle',
        // svg: '<polygon points="20,20 80,80 35,65" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawTriangle',
    },
    {
        id: 'right-triangle',
        name: '直角三角形',
        type: 'triangle',
        svg: '<polygon points="15,15 15,85 85,85" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawTriangle',
    },
    {
        id: 'acute-triangle',
        name: '等腰三角形',
        type: 'triangle',
        // svg: '<polygon points="15,15 85,15 50,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<polygon points="50,15 85,85 15,85" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawTriangle',
    },
    // 四边形
    {
        id: 'square',
        name: '正方形',
        type: 'rect',
        // svg: '<rect x="20" y="20" width="60" height="60" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<rect x="15" y="15" width="70" height="70" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawSquare',
    },
    {
        id: 'rectangle',
        name: '长方形',
        type: 'rect',
        // svg: '<rect x="20" y="20" width="60" height="40" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<rect x="15" y="25" width="70" height="50" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawRectangle',
    },
    {
        id: 'rectangle',
        name: '平行四边形',
        type: 'rect',
        // svg: '<polygon points="20,30 70,30 90,70 40,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<polygon points="15,30 70,30 85,70 30,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawParallelogram',
    },
    {
        id: 'parallelogram',
        name: '菱形',
        type: 'rect',
        // svg: '<polygon points="50,20 70,50 50,80 30,50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<polygon points="50,15 70,50 50,85 30,50" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawParallelogram',
    },
    {
        id: 'trapezoid',
        name: "梯形",
        type: 'rect',
        // svg: '<polygon points="40,30 70,30 90,70 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<polygon points="30,25 70,25 90,75 10,75" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawTrapezoid',
    },
    // 五边形   
    {
        id: 'pentagon',
        name: '五边形',
        type: 'rect',
        // svg: '<polygon points="50,10,80,35,68,70,32,70,20,35" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<polygon points="50,20,80,45,68,80,32,80,20,45" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawHexagon',
    },

    // 六边形
    {
        id: 'hexagon',
        name: '六边形',
        type: 'rect',
        svg: '<polygon points="15.4,30 50,10 84.6,30 84.6,70 50,90 15.4,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawHexagon',
    },
    // 五角星
    {
        id: 'pentagram',
        name: '五角星',
        type: 'rect',
        svg: '<polygon points="50,20 61,42 85,44 67,60 71,85 50,75 29,85 33,60 15,44 39,42" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawPentagram',
    },
    // 心形
    {
        id: 'heart',
        name: '心形',
        type: 'rect',
        svg: '<path d="M50,35 C35,20 20,35 25,50 C30,65 50,80 50,80 C50,80 70,65 75,50 C80,35 65,20 50,35Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawHeart',
    },
    // 圆形
    {
        id: 'circle',
        name: '圆形',
        type: 'circle',
        svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawCircle',
    },
    // 椭圆
    {
        id: 'ellipse',
        name: '椭圆',
        type: 'circle',
        svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawEllipse',
    },
    // 半圆
    {
        id: 'semicircle',
        name: '半圆',
        type: 'circle',
        // svg: '<path d="M20,70 A20,20 0 0,1 80,70 L70,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<path d="M15,65 A20,20 0 0,1 85,65 L85,65 Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawSemicircle',
    },
    // 扇形
    {
        id: 'sector',
        name: '扇形',
        type: 'circle',
        // svg: '<path d="M50,70 L80,35 A40,40 0 0,0 20,35 L50,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
        svg: '<path d="M50,75 L80,35 A40,40 0 0,0 20,35 L50,75 Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawSector',
    },
    // 圆环
    {
        id: 'ring',
        name: '圆环',
        type: 'circle',
        // svg: '<path d="M75,50 A25,25 0 1,0 25,50 A25,25 0 1,0 75,50 ZM65,50 A15,15 0 1,0 35,50 A15,15 0 1,0 65,50 Z" fill="#ff0000" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
        svg: '<path d="M85,50 A30,30 0 1,0 15,50 A30,30 0 1,0 85,50 ZM65,50A15,15 0 1,0 35,50A15,15 0 1,0 65,50 Z" fill="transparent" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawRing',
    },
];

export { SHAPES, ShapeCard };