use takumi::prelude::{Length::*, *};

use crate::test_utils::run_fixture_test;

// zune-jpeg had some strange decoding issues with jpeg (https://github.com/kane50613/takumi/commit/058f87ab1d668c1316ff72319d242989f0adfa43).
// This test is to ensure that never happens again.
#[test]
fn test_color_artifacts() {
  let main_preview = Node::container([Node::image(
    "assets/images/luma-cover-0dfbf65d-0f58-4941-947c-d84a5b131dc0.jpeg",
  )
  .with_style(
    Style::default()
      .with(StyleDeclaration::display(Display::Flex))
      .with(StyleDeclaration::width(Percentage(100.0)))
      .with(StyleDeclaration::height(Percentage(100.0)))
      .with(StyleDeclaration::object_fit(ObjectFit::Contain))
      .with_border_radius(BorderRadius::from_css_str("10px").unwrap()),
  )])
  .with_style(
    Style::default()
      .with(StyleDeclaration::display(Display::Flex))
      .with(StyleDeclaration::width(Px(640.0)))
      .with(StyleDeclaration::height(Px(440.0)))
      .with(StyleDeclaration::background_color(ColorInput::Value(
        Color([255, 255, 255, 96]),
      )))
      .with_border_radius(BorderRadius::from_css_str("24px").unwrap())
      .with_padding(Sides([Px(24.0); 4])),
  );

  let downscaled_preview = Node::container([Node::image(
    "assets/images/luma-cover-0dfbf65d-0f58-4941-947c-d84a5b131dc0.jpeg",
  )
  .with_style(
    Style::default()
      .with(StyleDeclaration::display(Display::Flex))
      .with(StyleDeclaration::width(Px(256.0)))
      .with(StyleDeclaration::height(Px(256.0)))
      .with(StyleDeclaration::object_fit(ObjectFit::Cover)),
  )])
  .with_style(
    Style::default()
      .with(StyleDeclaration::display(Display::Flex))
      .with(StyleDeclaration::height(Px(440.0)))
      .with(StyleDeclaration::background_color(ColorInput::Value(
        Color([255, 255, 255, 144]),
      )))
      .with(StyleDeclaration::align_items(AlignItems::Center))
      .with(StyleDeclaration::justify_content(JustifyContent::Center))
      .with_border_radius(BorderRadius::from_css_str("24px").unwrap()),
  );

  let container = Node::container([main_preview, downscaled_preview]).with_style(
    Style::default()
      .with(StyleDeclaration::display(Display::Flex))
      .with(StyleDeclaration::width(Percentage(100.0)))
      .with(StyleDeclaration::height(Percentage(100.0)))
      .with(StyleDeclaration::background_color(ColorInput::Value(
        Color([147, 197, 253, 255]),
      )))
      .with(StyleDeclaration::align_items(AlignItems::Center))
      .with(StyleDeclaration::justify_content(JustifyContent::Center))
      .with(StyleDeclaration::flex_direction(FlexDirection::Row))
      .with_gap(SpacePair::from_single(Px(40.0).into()))
      .with_padding(Sides([Rem(4.0); 4])),
  );

  run_fixture_test(container, "color_artifacts");
}
