import Title from "@/components/Title";
import styles from "./styles.module.scss";
import PointRing from "./PointRing";
import { ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";
import PhotoReady from "../PhotoReady";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useMemo } from "react";
import { compatibilityV3Prefix } from "@/routes";
import { IPalmistryLine } from "@/api/resources/Palmistry";
import { ICompatibilityV3FingerLocal } from "@/store/compatibilityV3";
import { useMetricABFlags } from "@/services/metric/metricService";

function PalmsSayAbout() {
  const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
  const lines = useSelector(selectors.selectCompatibilityV3Lines);
  const fingers = useSelector(selectors.selectCompatibilityV3Fingers);

  const { flags } = useMetricABFlags();
  const isReal = flags?.palmOnPayment?.[0] === "real";

  const filterByName = (
    array: Array<IPalmistryLine | ICompatibilityV3FingerLocal>,
    name: string
  ) => {
    return array.filter((value: IPalmistryLine | ICompatibilityV3FingerLocal) => value.name === name);
  };

  const love = useMemo(() => {
    return {
      lines: filterByName(lines, "heart") as IPalmistryLine[],
      fingers: filterByName(fingers, "thumb") as ICompatibilityV3FingerLocal[],
    };
  }, [fingers, lines]);

  const head = useMemo(() => {
    return {
      lines: filterByName(lines, "head") as IPalmistryLine[],
      fingers: filterByName(fingers, "index_finger") as ICompatibilityV3FingerLocal[],
    };
  }, [fingers, lines]);

  const life = useMemo(() => {
    return {
      lines: filterByName(lines, "life") as IPalmistryLine[],
      fingers: filterByName(
        fingers,
        "middle_finger"
      ) as ICompatibilityV3FingerLocal[],
    };
  }, [fingers, lines]);

  const fate = useMemo(() => {
    return {
      lines: filterByName(lines, "fate") as IPalmistryLine[],
      fingers: filterByName(fingers, "ring_finger") as ICompatibilityV3FingerLocal[],
    };
  }, [fingers, lines]);

  const pinky = useMemo(() => {
    return {
      lines: [],
      fingers: filterByName(fingers, "pinky") as ICompatibilityV3FingerLocal[],
    };
  }, [fingers]);

  return (
    <div className={styles.container}>
      <Title variant="h2" className={styles.title}>
        {translate("/trial-payment.palms_say_about.title")}
      </Title>
      <div className={styles.rows}>
        <div className={styles.row}>
          {!!love.lines.length && !!love.fingers.length && isReal && (
            <PhotoReady
              className={styles["photo-ready"]}
              lines={love.lines}
              fingers={love.fingers}
            />
          )}
          {(!love.lines.length || !love.fingers.length || !isReal) && (
            <img
              src={`${compatibilityV3Prefix}/love-line.svg`}
              alt="Hand with love line"
            />
          )}
          <div className={styles.points}>
            <div className={styles.point}>
              <PointRing />
              <p className={styles.text}>
                {translate("/trial-payment.palms_say_about.point1", {
                  color: (
                    <span>
                      {translate("/trial-payment.palms_say_about.point1_color")}
                    </span>
                  ),
                })}
              </p>
            </div>
            <div className={styles.point}>
              <PointRing />
              <p className={styles.text}>
                {translate("/trial-payment.palms_say_about.point2")}
              </p>
            </div>
          </div>
        </div>
        <div className={styles.row}>
          {!!head.lines.length && !!head.fingers.length && isReal && (
            <PhotoReady
              className={styles["photo-ready"]}
              lines={head.lines}
              fingers={head.fingers}
            />
          )}
          {(!head.lines.length || !head.fingers.length || !isReal) && (
            <img
              src={`${compatibilityV3Prefix}/head-line.svg`}
              alt="Hand with head line"
            />
          )}
          <div className={styles.points}>
            <div className={styles.point}>
              <PointRing gradientColor={["#34DF3D", "#27A72D"]} />
              <p className={styles.text}>
                {translate("/trial-payment.palms_say_about.point3", {
                  color: (
                    <span style={{ color: "#20B61D" }}>
                      {translate("/trial-payment.palms_say_about.point3_color")}
                    </span>
                  ),
                })}
              </p>
            </div>
            <div className={styles.point}>
              <PointRing gradientColor={["#34DF3D", "#27A72D"]} />
              <p className={styles.text}>
                {translate("/trial-payment.palms_say_about.point4")}
              </p>
            </div>
          </div>
        </div>
        <div className={styles.row}>
          {!!life.lines.length && !!life.fingers.length && isReal && (
            <PhotoReady
              className={styles["photo-ready"]}
              lines={life.lines}
              fingers={life.fingers}
            />
          )}
          {(!life.lines.length || !life.fingers.length || !isReal) && (
            <img
              src={`${compatibilityV3Prefix}/life-line.svg`}
              alt="Hand with life line"
            />
          )}
          <div className={styles.points}>
            <div className={styles.point}>
              <PointRing gradientColor={["#363AB0", "#282C84"]} />
              <p className={styles.text}>
                {translate("/trial-payment.palms_say_about.point5", {
                  color: (
                    <span style={{ color: "#2A37D3" }}>
                      {translate("/trial-payment.palms_say_about.point5_color")}
                    </span>
                  ),
                })}
              </p>
            </div>
            <div className={styles.point}>
              <PointRing gradientColor={["#363AB0", "#282C84"]} />
              <p className={styles.text}>
                {translate("/trial-payment.palms_say_about.point6")}
              </p>
            </div>
          </div>
        </div>
        <div className={styles.row}>
          {!!fate.lines.length && !!fate.fingers.length && isReal && (
            <PhotoReady
              className={styles["photo-ready"]}
              lines={fate.lines}
              fingers={fate.fingers}
            />
          )}
          {(!fate.lines.length || !fate.fingers.length || !isReal) && (
            <img
              src={`${compatibilityV3Prefix}/fate-line.svg`}
              alt="Hand with fate line"
            />
          )}
          <div className={styles.points}>
            <div className={styles.point}>
              <PointRing gradientColor={["#DF38E4", "#922595"]} />
              <p className={styles.text}>
                {translate("/trial-payment.palms_say_about.point7", {
                  color: (
                    <span style={{ color: "#BC23BF" }}>
                      {translate("/trial-payment.palms_say_about.point7_color")}
                    </span>
                  ),
                })}
              </p>
            </div>
            <div className={styles.point}>
              <PointRing gradientColor={["#DF38E4", "#922595"]} />
              <p className={styles.text}>
                {translate("/trial-payment.palms_say_about.point8")}
              </p>
            </div>
          </div>
        </div>
        <div className={styles.row}>
          {!!pinky.fingers.length && isReal && (
            <PhotoReady
              className={styles["photo-ready"]}
              lines={[]}
              fingers={pinky.fingers}
            />
          )}
          {(!pinky.fingers.length || !isReal) && (
            <img
              src={`${compatibilityV3Prefix}/hand-little-finger.svg`}
              alt="Hand with little finger"
            />
          )}
          <div className={styles.points}>
            <div className={styles.point}>
              <PointRing gradientColor={["#E9453A", "#922B25"]} />
              <p className={styles.text}>
                {translate("/trial-payment.palms_say_about.point9")}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default PalmsSayAbout;
