import type { ComponentType, TextProps } from '../../../../jsx';
import { Group, Text } from '../../../../jsx';
import { ShapesGroup } from '../../../components';
import { registerDivider, type DividerProps } from './types';

export const ProsConsArrow: ComponentType<DividerProps> = (props) => {
  const { x, y, colorPositive, colorNegative, colorBg } = props;

  const width = 200;
  const height = 141;

  const textAttrs: TextProps = {
    width: 90,
    height: 40,
    fontSize: 22,
    alignHorizontal: 'center',
    alignVertical: 'middle',
    fontWeight: 'bold',
    fill: colorBg,
  };

  return (
    <Group x={x} y={y} width={width} height={height}>
      <ShapesGroup>
        <path
          d="M137 54C137 54.2903 137 54.5806 136.706 54.7742L108.614 86.0323H64.7619C64.4071 86.0204 64.0557 86.1043 63.7453 86.2747C63.4349 86.4452 63.1773 86.6959 63 87C63.0037 86.7447 63.1092 86.5012 63.2936 86.3226L91.3862 55.0645H135.238C135.593 55.0763 135.944 54.9925 136.255 54.822C136.565 54.6516 136.823 54.4009 137 54.0968V54Z"
          fill="#D9D9D9"
        />
        <path
          d="M39.3272 0.484649C39.6146 0.234929 39.9662 0.0736935 40.3407 0.0198929C40.7152 -0.0339076 41.0971 0.0219605 41.4414 0.180925C41.7857 0.33989 42.0783 0.595358 42.2846 0.917314C42.491 1.23927 42.6026 1.61434 42.6063 1.99848V14.8156H136.013C136.54 14.8156 137.045 15.0282 137.418 15.4068C137.791 15.7853 138 16.2987 138 16.834V53.166C138 53.7013 137.791 54.2147 137.418 54.5932C137.045 54.9718 136.54 55.1844 136.013 55.1844H42.6063V68.0015C42.6026 68.3857 42.491 68.7607 42.2846 69.0827C42.0783 69.4046 41.7857 69.6601 41.4414 69.8191C41.0971 69.9781 40.7152 70.0339 40.3407 69.9801C39.9662 69.9263 39.6146 69.7651 39.3272 69.5154L0.672847 36.5138C0.461378 36.3244 0.292014 36.0915 0.176005 35.8305C0.0599968 35.5695 0 35.2864 0 35C0 34.7136 0.0599968 34.4306 0.176005 34.1696C0.292014 33.9085 0.461378 33.6756 0.672847 33.4862L39.4265 0.484649H39.3272Z"
          fill={colorPositive}
        />
        <path
          d="M157.394 73.0007C157.397 72.6162 157.509 72.2407 157.715 71.9183C157.922 71.596 158.214 71.3403 158.559 71.1811C158.903 71.022 159.285 70.9661 159.659 71.0199C160.034 71.0738 160.385 71.2352 160.673 71.4852L199.327 104.524C199.539 104.714 199.708 104.947 199.824 105.208C199.94 105.47 200 105.753 200 106.04C200 106.326 199.94 106.61 199.824 106.871C199.708 107.132 199.539 107.366 199.327 107.555L160.573 140.594C160.285 140.815 159.943 140.951 159.584 140.989C159.225 141.027 158.862 140.965 158.535 140.809C158.208 140.653 157.929 140.41 157.728 140.105C157.527 139.8 157.411 139.445 157.394 139.078V126.247H63.9874C63.4603 126.247 62.9548 126.034 62.5821 125.655C62.2094 125.276 62 124.762 62 124.226V87.8531C62 87.3172 62.2094 86.8032 62.5821 86.4242C62.9548 86.0453 63.4603 85.8324 63.9874 85.8324H157.394V73.0007Z"
          fill={colorNegative}
        />
      </ShapesGroup>
      <Text x={40} y={15} {...textAttrs}>
        Pros
      </Text>
      <Text x={70} y={85} {...textAttrs}>
        Cons
      </Text>
    </Group>
  );
};

registerDivider('pros-cons-arrow', ProsConsArrow);