import {
  animate,
  group,
  keyframes,
  query,
  style,
  transition,
  trigger,
} from "@angular/animations";

export const tabsModalAnimation = (type: string) =>
  trigger(type, [
    transition("ACTIVE => PENDING, CLOSED => ACTIVE, CLOSED => PENDING", left, {
      params: { height: "0px" },
    }),
    transition(
      "PENDING => ACTIVE, ACTIVE => CLOSED, PENDING => CLOSED",
      right,
      {
        params: { height: "0px" },
      }
    ),
  ]);

const left = [
  query(":leave", style({ position: "absolute", width: "100%" }), {
    optional: true,
  }),
  group([
    query(
      ":enter",
      [
        style({
          transform: "translateX(-8%)",
          opacity: 0,
          height: "{{height}}",
        }),
        animate(
          ".2s",
          keyframes([
            style({
              transform: "translateX(0%)",
              opacity: 1,
              height: "*",
            }),
          ])
        ),
      ],
      {
        optional: true,
      }
    ),
    query(
      ":leave",
      [
        style({
          opacity: 0,
        }),
        animate(
          ".2s",
          style({
            opacity: 0,
            height: "*",
          })
        ),
      ],
      {
        optional: true,
      }
    ),
  ]),
];

const right = [
  query(":leave", style({ position: "absolute", width: "100%" }), {
    optional: true,
  }),
  group([
    query(
      ":enter",
      [
        style({
          transform: "translateX(8%)",
          opacity: 0,
          height: "{{height}}",
        }),
        animate(
          ".2s",
          keyframes([
            style({
              transform: "translateX(0%)",
              opacity: 1,
              height: "*",
            }),
          ])
        ),
      ],
      {
        optional: true,
      }
    ),
    query(
      ":leave",
      [
        style({
          opacity: 0,
        }),
        animate(
          ".2s",
          style({
            opacity: 0,
            height: "*",
          })
        ),
      ],
      {
        optional: true,
      }
    ),
  ]),
];