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

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

  const width = 240;
  const height = 300;

  const textAttrs: TextProps = {
    width: 85,
    height: 30,
    fontSize: 20,
    alignHorizontal: 'center',
    alignVertical: 'middle',
    fontWeight: 'bold',
    fill: colorBg,
  };

  return (
    <Group x={x} y={y} width={width} height={height}>
      <ShapesGroup>
        <path
          d="M136.914 38.7755C137.303 38.7733 137.683 38.6617 138.011 38.4534C138.339 38.2451 138.602 37.9485 138.77 37.5977C138.937 37.247 139.002 36.8561 138.957 36.4701C138.913 36.084 138.76 35.7183 138.517 35.415L110.741 0.982313C110.548 0.735138 110.301 0.535238 110.018 0.397762C109.736 0.260286 109.426 0.188841 109.112 0.188841C108.798 0.188841 108.488 0.260286 108.206 0.397762C107.924 0.535238 107.676 0.735138 107.483 0.982313L79.7069 35.415C79.4639 35.7183 79.3113 36.084 79.2667 36.4701C79.222 36.8561 79.2871 37.247 79.4545 37.5977C79.6219 37.9485 79.8847 38.2451 80.213 38.4534C80.5412 38.6617 80.9216 38.7733 81.3104 38.7755H92.8965C93.0517 57.1293 97.5517 64.9878 105.259 73.7252C107.017 75.7932 108.983 77.8612 111.103 80.1361C113.276 82.4626 122.121 88.9252 131.069 95.181C129.362 88.7701 128.172 81.2218 127.293 73.7252C125.224 55.9918 125.017 38.7755 125.017 38.7755H136.914Z"
          fill={colorPositive}
          fillOpacity={0.4}
        />
        <path
          d="M237.931 109.967C238.48 109.967 239.006 109.749 239.394 109.362C239.782 108.974 240 108.448 240 107.899V75.7932C240 75.2447 239.782 74.7187 239.394 74.3309C239.006 73.9431 238.48 73.7252 237.931 73.7252H127.241C128.172 81.2218 129.362 88.7701 131.069 95.181C138.182 100.171 145.337 105.1 152.534 109.967H237.931Z"
          fill={colorPositive}
        />
        <path
          d="M152.586 109.967C152.586 109.967 141.724 102.678 131.069 95.181C124.122 90.5838 117.455 85.5772 111.103 80.1878C109.034 77.8612 107.017 75.7415 105.259 73.7252H48.6207V56.6639C48.6091 56.2797 48.4905 55.9063 48.2784 55.5857C48.0662 55.2651 47.7689 55.0099 47.4197 54.8488C47.0705 54.6878 46.6833 54.6271 46.3016 54.6738C45.9199 54.7204 45.5587 54.8725 45.2586 55.1129L1.50002 90.2694C1.26208 90.4633 1.07029 90.7078 0.938585 90.985C0.80688 91.2622 0.738558 91.5652 0.738558 91.8721C0.738558 92.179 0.80688 92.482 0.938585 92.7592C1.07029 93.0365 1.26208 93.2809 1.50002 93.4748L45.2586 128.631C45.5621 128.874 45.928 129.027 46.3142 129.071C46.7005 129.116 47.0914 129.051 47.4424 128.884C47.7933 128.716 48.09 128.454 48.2984 128.125C48.5068 127.797 48.6185 127.417 48.6207 127.029V109.967H152.586Z"
          fill="#BFBFBF"
        />
        <path
          d="M36.1034 88.9252H28.9655V93.785H36.1034V101.85H41.4828V93.785H48.6207V88.8735H41.4828V81.1701H36.1034V88.9252Z"
          fill="#404040"
        />
        <path
          d="M103.086 261.224C102.697 261.227 102.317 261.338 101.989 261.547C101.661 261.755 101.398 262.051 101.23 262.402C101.063 262.753 100.998 263.144 101.043 263.53C101.087 263.916 101.24 264.282 101.483 264.585L129.259 299.018C129.452 299.265 129.699 299.465 129.982 299.602C130.264 299.74 130.574 299.811 130.888 299.811C131.202 299.811 131.512 299.74 131.794 299.602C132.076 299.465 132.324 299.265 132.517 299.018L160.293 264.585C160.536 264.282 160.689 263.916 160.733 263.53C160.778 263.144 160.713 262.753 160.546 262.402C160.378 262.051 160.115 261.755 159.787 261.547C159.459 261.338 159.078 261.227 158.69 261.224H147.103C146.948 242.871 142.448 235.012 134.741 226.275C132.983 224.207 131.017 222.139 128.897 219.864C126.724 217.537 117.879 211.075 108.931 204.819C110.677 211.877 111.938 219.045 112.707 226.275C114.776 244.008 114.983 261.224 114.983 261.224H103.086Z"
          fill={colorNegative}
          fillOpacity={0.4}
        />
        <path
          d="M2.06897 190.033C1.52025 190.033 0.993996 190.251 0.605989 190.638C0.217983 191.026 5.00679e-06 191.552 5.00679e-06 192.101V224.207C5.00679e-06 224.755 0.217983 225.281 0.605989 225.669C0.993996 226.057 1.52025 226.275 2.06897 226.275H112.759C111.828 218.778 110.638 211.23 108.931 204.819C99.9827 198.512 90.931 192.411 88.2414 190.55C87.7206 190.204 87.1077 190.024 86.4828 190.033H2.06897Z"
          fill={colorNegative}
        />
        <path
          d="M87.4138 190.033C87.4138 190.033 98.2759 197.322 108.931 204.819C115.878 209.416 122.545 214.423 128.897 219.812C130.966 222.139 132.983 224.258 134.741 226.275H191.379V243.336C191.391 243.72 191.51 244.094 191.722 244.414C191.934 244.735 192.231 244.99 192.58 245.151C192.929 245.312 193.317 245.373 193.698 245.326C194.08 245.28 194.441 245.128 194.741 244.887L238.5 209.731C238.738 209.537 238.93 209.292 239.061 209.015C239.193 208.738 239.261 208.435 239.261 208.128C239.261 207.821 239.193 207.518 239.061 207.241C238.93 206.964 238.738 206.719 238.5 206.525L194.741 171.369C194.438 171.126 194.072 170.973 193.686 170.929C193.3 170.884 192.909 170.949 192.558 171.116C192.207 171.284 191.91 171.546 191.702 171.875C191.493 172.203 191.382 172.583 191.379 172.971V190.033H87.4138Z"
          fill="#BFBFBF"
        />
        <path
          d="M192.414 205.905V210.816H212.069V205.905H192.414Z"
          fill="#404040"
        />
      </ShapesGroup>
      <Text x={153} y={77} {...textAttrs}>
        PROS
      </Text>
      <Text x={2} y={193} {...textAttrs}>
        CONS
      </Text>
    </Group>
  );
};

registerDivider('pros-cons-fold', ProsConsFold);