/* eslint-disable max-len */
import './scss/powertriangle.scss';
import React from 'react';

function PowerTriangle(props) {
  const {
    valueA, valueB, valueC, angleAB, angleAC,  UNIT,
    arcColor, lineColor, axeColor, axeFont, unitFont, unitsColor,
    degreeFont, degreeColor,
  } = props;

  const angleA = (360 - angleAB - angleAC).toFixed(1);

  // Перевод значений в пропорциональные величины
  const maxLength = Math.max(valueA, valueB, valueC);
  const coefficient = 70 / maxLength;

  const lengthA = Math.floor(valueA * coefficient);
  const lengthB = Math.floor(valueB * coefficient);
  const lengthC = Math.floor(valueC * coefficient);

  // Перевод углов в радианы
  const angleBRad = (180 - angleAB) * (Math.PI / 180);
  const angleCRad = (180 - angleAC) * (Math.PI / 180);

  const sinB = Math.sin(angleBRad);
  const cosB = Math.cos(angleBRad);
  const lengthXB = lengthB * sinB;
  const lengthYB = lengthB * cosB;

  const sinC = Math.sin(angleCRad);
  const cosC = Math.cos(angleCRad);
  const lengthXC = lengthC * sinC;
  const lengthYC = lengthC * cosC;

  // Координаты
  const X = 100;
  const Y = 100;

  // Рассчет координат дуг углов
  const pathParamsB = `M ${X},${Y - 5}  
    A 5 5 10 0 1 ${X + 5 * sinB},${Y + 5 * cosB}`;

  const pathParamsC = `M ${X},${Y - 5}  
    A 5 5 10 0 0 ${X - 5 * sinC},${Y + 5 * cosC}`;

  const pathParamsCC = `M ${X},${Y - 10}  
    A 10 10 10 0 0 ${X - 10 * sinC},${Y + 10 * cosC}`;

  const pathParamsA = `M ${X + 5 * sinB},${Y + 5 * cosB}  
    A 5 5 10 0 1 ${X - 5 * sinC},${Y + 5 * cosC}`;

  const pathParamsAA = `M ${X + 10 * sinB},${Y + 10 * cosB}  
    A 10 10 10 0 1 ${X - 10 * sinC},${Y + 10 * cosC}`;

  const pathParamsAAA = `M ${X + 15 * sinB},${Y + 15 * cosB}  
A 15 15 10 0 1 ${X - 15 * sinC},${Y + 15 * cosC}`;

  return (

    <div className="OmniPowerTrianle">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none" >

{/* Стрелка для вектора */}
<defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7"
    refX="0" refY="3.5" orient="auto" fill="#8D929A">
      <polygon points="0 0, 10 3.5, 0 7" />
    </marker>
</defs>

{/* Дуги углов */}
<path fill="none" stroke={arcColor}
        d={pathParamsB} />

<path fill="none" stroke={arcColor}
        d={pathParamsC} />

 <path fill="none" stroke={arcColor}
        d={pathParamsCC} />

<path fill="none" stroke={arcColor}
        d={pathParamsA} />

<path fill="none" stroke={arcColor}
        d={pathParamsAA} />

<path fill="none" stroke={arcColor}
        d={pathParamsAAA} />

{/* Линии векторов */}
<line x1={X} y1={Y} x2={X} y2={(lengthA < 20) ? Y - 20 : Y - lengthA} stroke={lineColor}
  strokeWidth="1" markerEnd="url(#arrowhead)" />

<line x1={X} y1={Y} x2={(lengthB < 20) ? X + 20 * sinB : X + lengthXB} y2={(lengthB < 20) ? Y + 20 * cosB : Y + lengthYB}
stroke={lineColor} strokeWidth="1" markerEnd="url(#arrowhead)"
  />

<line x1={X} y1={Y} x2={(lengthC < 20) ? X - 20 * sinC : X - lengthXC} y2={(lengthC < 20) ? Y + 20 * cosC : Y + lengthYC}
stroke={lineColor}
  strokeWidth="1" markerEnd="url(#arrowhead)" />

{/* Подпись Линии 1 */}
<foreignObject x={X} y={(lengthA < 20) ? Y - 35 : Y - lengthA - 13} color={axeColor} fontSize={axeFont} overflow="visible">
    <div xmlns="http://www.w3.org/1999/xhtml">
     A
    </div>
</foreignObject>

  <foreignObject x={X} y={(lengthA < 20) ? Y - 45 : Y - lengthA - 22} className="units" fontSize={unitFont}
  color={unitsColor} overflow="visible">
    <div xmlns="http://www.w3.org/1999/xhtml">
     {valueA} {UNIT}
    </div>
  </foreignObject>

{/* Подпись Линии 2 */}
  <foreignObject x={(lengthB < 20) ? X + 35 * sinB : X + lengthXB + 13 * sinB} y={(lengthB < 20) ? Y + 35 * cosB : Y + lengthYB + 13 * cosB}
  color={axeColor} fontSize={axeFont} overflow="visible">
    <div xmlns="http://www.w3.org/1999/xhtml">
     B
    </div>
  </foreignObject>

  <foreignObject x={(lengthB < 20) ? X + 45 * sinB : X + lengthXB + 23 * sinB} y={(lengthB < 30) ? Y + 45 * cosB : Y + lengthYB + 23 * cosB}
  className="volts" fontSize={unitFont} overflow="visible" color={unitsColor}>
    <div xmlns="http://www.w3.org/1999/xhtml">
     {valueB} {UNIT}
    </div>
  </foreignObject>

{/* Подпись Линии 3 */}
<foreignObject x={(lengthC < 20) ? X - 35 * sinC : X - lengthXC - 13 * sinC} y={(lengthC < 30) ? Y + 35 * cosC : Y + lengthYC + 13 * cosC}
color={axeColor} fontSize={axeFont} overflow="visible">
    <div xmlns="http://www.w3.org/1999/xhtml">
     C
    </div>
  </foreignObject>

  <foreignObject x={(lengthC < 20) ? X - 45 * sinC : X - lengthXC - 23 * sinC} y={(lengthC < 20) ? Y + 45 * cosC : Y + lengthYC + 23 * cosC}
  className="volts" fontSize={unitFont} color={unitsColor} overflow="visible" >
    <div xmlns="http://www.w3.org/1999/xhtml">
     {valueC} {UNIT}
    </div>
  </foreignObject>

{/* Подпись Углов */}
  <foreignObject x={X + 12} y={Y - 8} fontSize={degreeFont} color={degreeColor} overflow="visible">
    <div xmlns="http://www.w3.org/1999/xhtml">
     {angleAB}°
    </div>
  </foreignObject>

  <foreignObject x={X - 17} y={Y - 7} fontSize={degreeFont} color={degreeColor} overflow="visible">
    <div xmlns="http://www.w3.org/1999/xhtml">
     {angleAC}°
    </div>
  </foreignObject>

  <foreignObject x={X + 5} y={Y + 20} fontSize={degreeFont} color={degreeColor} overflow="visible">
    <div xmlns="http://www.w3.org/1999/xhtml">
     {angleA}°
    </div>
  </foreignObject>

</svg>

    </div>
  );
}

export default PowerTriangle;