import { G, Path } from 'react-native-svg';
import { getColorVariation } from '../utils/colorUtils';

export const FaceComposer = (id: number, color: string, alone: boolean) => {
  const transform = alone ? 'translate(20,-100)' : '';
  switch (id) {
    case 1:
      return blush(color, transform);
    case 2:
      return beard(color, transform);
    case 3:
      return normal(color, transform);
    default:
      return <></>;
  }
};

const blush = (color: string, transform: string) => {
  const secColor = getColorVariation(color, -0.2);
  return (
    <G transform={transform}>
      <Path
        fill={color}
        d="M1014 1197.33C1010.97 1199.5 1007.5 1201.66 1004.47 1203.83C1001 1206 997.967 1208.16 994.5 1209.9C991.467 1211.63 988.867 1213.36 985.833 1215.1C985.4 1215.53 984.967 1215.53 984.533 1215.96C974.567 1222.03 964.167 1227.66 953.767 1232.86C950.733 1234.6 947.267 1236.33 944.233 1237.63C944.233 1237.63 943.8 1238.06 943.367 1238.06C939.9 1239.8 936.433 1241.53 932.967 1243.26C926.033 1246.73 918.667 1249.76 911.733 1252.8C908.267 1254.53 904.367 1255.83 900.9 1257.13C897.433 1258.43 893.533 1260.16 890.067 1261.46C886.6 1262.76 882.7 1264.5 879.233 1265.8C879.233 1265.8 879.233 1265.8 878.8 1265.8C875.333 1267.1 871.433 1268.4 867.967 1269.7C860.167 1272.3 851.933 1274.9 844.133 1277.5C841.533 1278.36 838.5 1279.23 835.9 1280.1C827.667 1282.7 819.433 1284.86 811.2 1286.6C808.167 1287.46 805.133 1287.9 801.667 1288.76C793.867 1290.5 785.633 1292.23 777.833 1293.96C776.1 1294.4 774.8 1294.4 773.067 1294.83C770.467 1295.26 767.433 1295.7 764.833 1296.13C760.933 1296.56 757.467 1297.43 753.567 1297.86C751.833 1298.3 750.1 1298.3 748.367 1298.73C746.2 1299.16 743.6 1299.6 741 1299.6C734.067 1300.46 726.7 1301.33 719.767 1302.2C717.6 1302.63 715 1302.63 712.833 1303.06H712.4C709.367 1303.5 706.333 1303.5 703.3 1303.93C700.267 1304.36 697.233 1304.36 694.2 1304.36C692.467 1304.36 690.3 1304.8 688.567 1304.8C685.1 1304.8 682.067 1305.23 679.033 1305.23C674.7 1305.23 670.8 1305.66 666.467 1305.66C662.133 1305.66 658.233 1305.66 653.9 1305.66C650.867 1305.66 647.833 1305.66 644.8 1305.66C462.367 1303.06 297.7 1225.5 180.7 1102.43C180.7 1102.43 180.7 1102 180.267 1102C193.7 1075.56 243.534 1027.9 295.534 988.465C361.4 938.632 454.567 907.865 454.567 907.865C454.567 907.865 515.667 897.898 742.3 945.132C915.2 981.532 988.867 1129.3 1014 1197.33Z"
      />
      <Path
        fill={color}
        d="M790.4 1065.16C781.3 1109.8 722.367 1136.23 623.134 1096.36C501.367 1046.96 454.567 907.865 454.567 907.865C448.067 808.198 432.9 722.832 432.9 722.832C573.734 710.698 740.134 875.365 740.134 875.365L759.2 956.832C760.934 963.765 764.4 969.832 769.6 974.165C778.7 989.765 796.467 1036.56 790.4 1065.16Z"
      />
      <Path
        fill={color}
        d="M769.6 974.599C686.833 970.265 625.733 958.132 560.3 840.699C615.767 889.665 681.2 908.299 750.1 916.965L759.2 956.832C760.933 964.199 764.4 970.265 769.6 974.599Z"
      />
      <Path
        fill={color}
        d="M940.767 452.432C948.567 488.832 952.467 518.298 931.233 615.365C910 712.432 950.733 809.498 848.467 898.332C779.567 958.132 659.1 969.398 562.9 903.965C530.4 881.865 500.5 851.098 476.233 810.798C457.167 779.165 435.067 749.265 410.367 721.965C376.133 684.698 334.967 609.732 355.333 477.132C388.267 261.332 601.9 236.632 728 260.465C854.1 284.298 919.533 356.232 940.767 452.432Z"
      />
      <Path
        fill="none"
        d="M526.067 621.865C526.067 621.865 512.633 556.865 449.367 564.665C394.767 571.598 375.7 702.465 499.633 738.865"
      />

      <Path
        fill="none"
        stroke="#170e0e"
        d="M495.734 679.498C495.734 679.498 480.134 669.532 481.867 652.198C484.467 631.832 481.867 619.265 472.334 615.365C448.501 605.398 443.734 633.132 444.601 636.598"
        stroke-width="13"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <Path
        fill={secColor}
        d="M826.367 721.532C826.367 721.532 842.833 722.398 858.433 703.765C867.1 693.365 874.467 680.365 869.7 676.465C864.933 672.132 786.5 684.265 781.3 694.665C776.1 705.065 806.433 721.532 826.367 721.532Z"
      />
      <Path
        fill="none"
        stroke="#170e0e"
        d="M839.367 575.932C839.367 575.932 840.234 617.098 866.667 663.032C878.367 683.398 860.601 716.765 822.034 722.398"
        stroke-width="13"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke-linejoin="round"
      />

      <Path
        opacity="0.42"
        d="M604.501 743.632C629.151 743.632 649.134 727.141 649.134 706.799C649.134 686.456 629.151 669.965 604.501 669.965C579.85 669.965 559.867 686.456 559.867 706.799C559.867 727.141 579.85 743.632 604.501 743.632Z"
        fill="#ED938A"
      />
      <Path
        opacity="0.42"
        d="M924.3 670.832C923 695.098 923.434 718.932 921.7 742.765C902.634 738.432 888.767 724.132 888.767 707.232C888.767 689.032 903.933 674.298 924.3 670.832Z"
        fill="#ED938A"
      />
    </G>
  );
};
const beard = (color: string, transform: string) => {
  const secColor = getColorVariation(color, -0.2);
  return (
    <G transform={transform}>
      <Path
        fill={color}
        d="M1014 1197.33C1010.97 1199.5 1007.5 1201.66 1004.47 1203.83C1001 1206 997.967 1208.16 994.5 1209.9C991.467 1211.63 988.867 1213.36 985.833 1215.1C985.4 1215.53 984.967 1215.53 984.533 1215.96C974.567 1222.03 964.167 1227.66 953.767 1232.86C950.733 1234.6 947.267 1236.33 944.233 1237.63C944.233 1237.63 943.8 1238.06 943.367 1238.06C939.9 1239.8 936.433 1241.53 932.967 1243.26C926.033 1246.73 918.667 1249.76 911.733 1252.8C908.267 1254.53 904.367 1255.83 900.9 1257.13C897.433 1258.43 893.533 1260.16 890.067 1261.46C886.6 1262.76 882.7 1264.5 879.233 1265.8C879.233 1265.8 879.233 1265.8 878.8 1265.8C875.333 1267.1 871.433 1268.4 867.967 1269.7C860.167 1272.3 851.933 1274.9 844.133 1277.5C841.533 1278.36 838.5 1279.23 835.9 1280.1C827.667 1282.7 819.433 1284.86 811.2 1286.6C808.167 1287.46 805.133 1287.9 801.667 1288.76C793.867 1290.5 785.633 1292.23 777.833 1293.96C776.1 1294.4 774.8 1294.4 773.067 1294.83C770.467 1295.26 767.433 1295.7 764.833 1296.13C760.933 1296.56 757.467 1297.43 753.567 1297.86C751.833 1298.3 750.1 1298.3 748.367 1298.73C746.2 1299.16 743.6 1299.6 741 1299.6C734.067 1300.46 726.7 1301.33 719.767 1302.2C717.6 1302.63 715 1302.63 712.833 1303.06H712.4C709.367 1303.5 706.333 1303.5 703.3 1303.93C700.267 1304.36 697.233 1304.36 694.2 1304.36C692.467 1304.36 690.3 1304.8 688.567 1304.8C685.1 1304.8 682.067 1305.23 679.033 1305.23C674.7 1305.23 670.8 1305.66 666.467 1305.66C662.133 1305.66 658.233 1305.66 653.9 1305.66C650.867 1305.66 647.833 1305.66 644.8 1305.66C462.367 1303.06 297.7 1225.5 180.7 1102.43C180.7 1102.43 180.7 1102 180.267 1102C193.7 1075.56 243.534 1027.9 295.534 988.465C361.4 938.632 454.567 907.865 454.567 907.865C454.567 907.865 515.667 897.898 742.3 945.132C915.2 981.532 988.867 1129.3 1014 1197.33Z"
      />
      <Path
        fill={color}
        d="M790.4 1065.16C781.3 1109.8 722.367 1136.23 623.134 1096.36C501.367 1046.96 454.567 907.865 454.567 907.865C448.067 808.198 432.9 722.832 432.9 722.832C573.734 710.698 740.134 875.365 740.134 875.365L759.2 956.832C760.934 963.765 764.4 969.832 769.6 974.165C778.7 989.765 796.467 1036.56 790.4 1065.16Z"
      />
      <Path
        fill={color}
        d="M769.6 974.599C686.833 970.265 625.733 958.132 560.3 840.699C615.767 889.665 681.2 908.299 750.1 916.965L759.2 956.832C760.933 964.199 764.4 970.265 769.6 974.599Z"
      />
      <Path
        fill={color}
        d="M940.767 452.432C948.567 488.832 952.467 518.298 931.233 615.365C910 712.432 950.733 809.498 848.467 898.332C779.567 958.132 659.1 969.398 562.9 903.965C530.4 881.865 500.5 851.098 476.233 810.798C457.167 779.165 435.067 749.265 410.367 721.965C376.133 684.698 334.967 609.732 355.333 477.132C388.267 261.332 601.9 236.632 728 260.465C854.1 284.298 919.533 356.232 940.767 452.432Z"
      />
      <Path
        fill="none"
        d="M526.067 621.865C526.067 621.865 512.633 556.865 449.367 564.665C394.767 571.598 375.7 702.465 499.633 738.865"
      />

      <Path
        fill="none"
        stroke="#170e0e"
        d="M495.734 679.498C495.734 679.498 480.134 669.532 481.867 652.198C484.467 631.832 481.867 619.265 472.334 615.365C448.501 605.398 443.734 633.132 444.601 636.598"
        stroke-width="13"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <Path
        fill={secColor}
        d="M826.367 721.532C826.367 721.532 842.833 722.398 858.433 703.765C867.1 693.365 874.467 680.365 869.7 676.465C864.933 672.132 786.5 684.265 781.3 694.665C776.1 705.065 806.433 721.532 826.367 721.532Z"
      />
      <Path
        fill="none"
        stroke="#170e0e"
        d="M839.367 575.932C839.367 575.932 840.234 617.098 866.667 663.032C878.367 683.398 860.601 716.765 822.034 722.398"
        stroke-width="13"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke-linejoin="round"
      />

      <Path
        d="M906.533 816.417C906.533 816.85 906.533 816.85 906.533 816.417C906.1 816.85 906.1 816.85 906.533 816.417C895.7 844.583 877.933 871.45 847.6 897.883C778.7 957.683 658.233 968.95 562.033 903.517C551.2 896.15 540.8 887.917 530.833 878.817C523.9 870.15 517.833 861.05 512.633 851.517C481.433 793.017 494.867 738.417 494.867 738.417C494.867 738.417 512.633 738.85 533.867 780.45C551.633 815.117 620.1 813.817 648.266 748.817C679.466 676.45 757.466 708.083 775.233 715.017C793 721.95 820.733 721.95 820.733 721.95C890.933 721.083 869.7 768.317 877.066 794.317C887.9 829.85 906.533 816.417 906.533 816.417Z"
        fill="#423232"
      />
    </G>
  );
};
const normal = (color: string, transform: string) => {
  const secColor = getColorVariation(color, -0.2);
  return (
    <G transform={transform}>
      <Path
        fill={color}
        d="M1014 1197.33C1010.97 1199.5 1007.5 1201.66 1004.47 1203.83C1001 1206 997.967 1208.16 994.5 1209.9C991.467 1211.63 988.867 1213.36 985.833 1215.1C985.4 1215.53 984.967 1215.53 984.533 1215.96C974.567 1222.03 964.167 1227.66 953.767 1232.86C950.733 1234.6 947.267 1236.33 944.233 1237.63C944.233 1237.63 943.8 1238.06 943.367 1238.06C939.9 1239.8 936.433 1241.53 932.967 1243.26C926.033 1246.73 918.667 1249.76 911.733 1252.8C908.267 1254.53 904.367 1255.83 900.9 1257.13C897.433 1258.43 893.533 1260.16 890.067 1261.46C886.6 1262.76 882.7 1264.5 879.233 1265.8C879.233 1265.8 879.233 1265.8 878.8 1265.8C875.333 1267.1 871.433 1268.4 867.967 1269.7C860.167 1272.3 851.933 1274.9 844.133 1277.5C841.533 1278.36 838.5 1279.23 835.9 1280.1C827.667 1282.7 819.433 1284.86 811.2 1286.6C808.167 1287.46 805.133 1287.9 801.667 1288.76C793.867 1290.5 785.633 1292.23 777.833 1293.96C776.1 1294.4 774.8 1294.4 773.067 1294.83C770.467 1295.26 767.433 1295.7 764.833 1296.13C760.933 1296.56 757.467 1297.43 753.567 1297.86C751.833 1298.3 750.1 1298.3 748.367 1298.73C746.2 1299.16 743.6 1299.6 741 1299.6C734.067 1300.46 726.7 1301.33 719.767 1302.2C717.6 1302.63 715 1302.63 712.833 1303.06H712.4C709.367 1303.5 706.333 1303.5 703.3 1303.93C700.267 1304.36 697.233 1304.36 694.2 1304.36C692.467 1304.36 690.3 1304.8 688.567 1304.8C685.1 1304.8 682.067 1305.23 679.033 1305.23C674.7 1305.23 670.8 1305.66 666.467 1305.66C662.133 1305.66 658.233 1305.66 653.9 1305.66C650.867 1305.66 647.833 1305.66 644.8 1305.66C462.367 1303.06 297.7 1225.5 180.7 1102.43C180.7 1102.43 180.7 1102 180.267 1102C193.7 1075.56 243.534 1027.9 295.534 988.465C361.4 938.632 454.567 907.865 454.567 907.865C454.567 907.865 515.667 897.898 742.3 945.132C915.2 981.532 988.867 1129.3 1014 1197.33Z"
      />
      <Path
        fill={color}
        d="M790.4 1065.16C781.3 1109.8 722.367 1136.23 623.134 1096.36C501.367 1046.96 454.567 907.865 454.567 907.865C448.067 808.198 432.9 722.832 432.9 722.832C573.734 710.698 740.134 875.365 740.134 875.365L759.2 956.832C760.934 963.765 764.4 969.832 769.6 974.165C778.7 989.765 796.467 1036.56 790.4 1065.16Z"
      />
      <Path
        fill={color}
        d="M769.6 974.599C686.833 970.265 625.733 958.132 560.3 840.699C615.767 889.665 681.2 908.299 750.1 916.965L759.2 956.832C760.933 964.199 764.4 970.265 769.6 974.599Z"
      />
      <Path
        fill={color}
        d="M940.767 452.432C948.567 488.832 952.467 518.298 931.233 615.365C910 712.432 950.733 809.498 848.467 898.332C779.567 958.132 659.1 969.398 562.9 903.965C530.4 881.865 500.5 851.098 476.233 810.798C457.167 779.165 435.067 749.265 410.367 721.965C376.133 684.698 334.967 609.732 355.333 477.132C388.267 261.332 601.9 236.632 728 260.465C854.1 284.298 919.533 356.232 940.767 452.432Z"
      />
      <Path
        fill="none"
        d="M526.067 621.865C526.067 621.865 512.633 556.865 449.367 564.665C394.767 571.598 375.7 702.465 499.633 738.865"
      />
      <Path
        fill="none"
        stroke="#170e0e"
        d="M495.734 679.498C495.734 679.498 480.134 669.532 481.867 652.198C484.467 631.832 481.867 619.265 472.334 615.365C448.501 605.398 443.734 633.132 444.601 636.598"
        stroke-width="13"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <Path
        fill={secColor}
        d="M826.367 721.532C826.367 721.532 842.833 722.398 858.433 703.765C867.1 693.365 874.467 680.365 869.7 676.465C864.933 672.132 786.5 684.265 781.3 694.665C776.1 705.065 806.433 721.532 826.367 721.532Z"
      />

      <Path
        fill="none"
        stroke="#170e0e"
        d="M839.367 575.932C839.367 575.932 840.234 617.098 866.667 663.032C878.367 683.398 860.601 716.765 822.034 722.398"
        stroke-width="13"
        stroke-miterlimit="10"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </G>
  );
};
