import { __ } from '@wordpress/i18n';
import { mapOptions } from '@tailwind/helpers';

import TailwindIcon from 'blockbite-icons/dist/Tailwind';
import DimensionsIcon from 'blockbite-icons/dist/Dimensions';
/* transition-none, transition-all, transition-color, transition-opacity, transition-shadow, transition-transform */
const transtionValues = [
  { label: 'None', id: 'none' },
  { label: 'All', id: 'all' },
  { label: 'Color', id: 'color' },
  { label: 'Opacity', id: 'opacity' },
  { label: 'Shadow', id: 'shadow' },
  { label: 'Transform', id: 'transform' },
];

const transitionTimingValues = [
  { label: 'Linear', id: 'linear' },
  { label: 'In', id: 'in' },
  { label: 'Out', id: 'out' },
  { label: 'In Out', id: 'in-out' },
];

// duration-0, 75, 100, 150 , 200, 300, 500, 700, 1000
const transitionDurationValues = [
  { label: 'None', id: '0' },
  { label: '75ms', id: '75' },
  { label: '100ms', id: '100' },
  { label: '150ms', id: '150' },
  { label: '200ms', id: '200' },
  { label: '300ms', id: '300' },
  { label: '500ms', id: '500' },
  { label: '700ms', id: '700' },
  { label: '1000ms', id: '1000' },
];

const transitionDelayValues = [
  { label: 'None', id: '0' },
  { label: '75ms', id: '75' },
  { label: '100ms', id: '100' },
  { label: '150ms', id: '150' },
  { label: '200ms', id: '200' },
  { label: '300ms', id: '300' },
  { label: '500ms', id: '500' },
  { label: '700ms', id: '700' },
  { label: '1000ms', id: '1000' },
];

/* custom from blockbite-tailwind / animate */
const effectValues = [
  { label: 'None', id: 'none' },
  { label: 'Fade', id: 'fade' },
  { label: 'Scale', id: 'scale' },
  { label: 'Slide', id: 'slide' },
  { label: 'Fade Slide', id: 'fadeslide' },
];

const directionValues = [
  { label: 'Top', id: 'top' },
  { label: 'Bottom', id: 'bottom' },
  { label: 'Left', id: 'left' },
  { label: 'Right', id: 'right' },
];

const offsetValues = [
  { label: 'None', id: '0' },
  { label: 'Small', id: '20' },
  { label: 'Medium', id: '40' },
  { label: 'Large', id: '80' },
  { label: 'Very Large', id: '160' },
];

const speedValues = [
  { label: 'None', id: '0' },
  { label: 'Slow', id: '1.4' },
  { label: 'Medium', id: '0.6' },
  { label: 'Fast', id: '0.3' },
];

/*
const easeValues = [
  { label: 'None', id: 'none' },
  { label: 'Power 1', id: 'power1' },
  { label: 'Power 2', id: 'power2' },
  { label: 'Power 3', id: 'power3' },
  { label: 'Elastic', id: 'elastic' },
  { label: 'Bounce', id: 'bounce' },
  { label: 'Expo', id: 'expo' },
  { label: 'Sine', id: 'sine' },
  { label: 'Back', id: 'back' },
];
*/

const easeMoveValues = [
  { label: 'None', id: 'none' },
  { label: 'In', id: 'in' },
  { label: 'Out', id: 'out' },
  { label: 'In Out', id: 'inOut' },
];

const timesValues = [
  { label: 'Every time', id: '0' },
  { label: 'Once', id: '1' },
];

const tilevalues = [
  { label: 'Tile Slide In', id: 'b_tile-in-left' },
  { label: 'Tile Fade In', id: 'b_tile-in-fade' },
];

const effect = {
  id: 'motioneffect',
  label: __('Effect', 'blockbite'),
  helper: __('Motion effect', 'blockbite'),

  modifiers: [
    {
      id: 'motioneffect',
      label: __('Effect', 'blockbite'),
      selector: 'animate-',
      options: [...mapOptions(effectValues)],
    },
  ],
};

const direction = {
  id: 'motiondir',
  label: __('Direction', 'blockbite'),
  helper: __('Motion direction', 'blockbite'),
  modifiers: [
    {
      id: 'motiondir',
      label: __('Direction', 'blockbite'),
      options: [...mapOptions(directionValues)],
    },
  ],
};
const offset = {
  id: 'motionoffset',
  label: __('Offset', 'blockbite'),
  helper: __('Motion offset', 'blockbite'),

  modifiers: [
    {
      id: 'motiony',
      label: __('Offset X', 'blockbite'),
      selector: 'b_ani-x-',
      options: [...mapOptions(offsetValues)],
    },
    {
      id: 'motionx',
      label: __('Offset Y', 'blockbite'),
      selector: 'b_ani-y-',
      options: [...mapOptions(offsetValues)],
    },
  ],
};

const delay = {
  id: 'motiondelay',
  label: __('Delay', 'blockbite'),
  helper: __('Motion delay', 'blockbite'),
  modifiers: [
    {
      id: 'motiondelay',
      label: __('Delay', 'blockbite'),
      selector: 'delay-',
      options: [...mapOptions(transitionDelayValues)],
    },
  ],
};

export const speed = {
  id: 'motionspeed',
  label: __('Speed', 'blockbite'),
  helper: __('Motion speed', 'blockbite'),

  modifiers: [
    {
      id: 'motionspeed',
      label: __('Speed', 'blockbite'),
      selector: 'duration-',
      options: [...mapOptions(speedValues)],
    },
  ],
};

const ease = {
  id: 'motionease',
  label: __('Ease', 'blockbite'),
  helper: __('Motion ease', 'blockbite'),
  modifiers: [
    {
      id: 'motionease',
      label: __('Ease', 'blockbite'),
      selector: 'ease-',
      options: [...mapOptions(transitionTimingValues)],
    },
  ],
};
const easemove = {
  id: 'easemove',
  label: __('Ease Movement', 'blockbite'),
  helper: __('Motion ease movement', 'blockbite'),
  modifiers: [
    {
      id: 'easemove',
      label: __('Ease Movement', 'blockbite'),
      options: [...mapOptions(easeMoveValues)],
    },
  ],
};

const times = {
  id: 'motiontimes',
  label: __('Times', 'blockbite'),
  helper: __('Motion times', 'blockbite'),
  modifiers: [
    {
      id: 'motiontimes',
      label: __('Times', 'blockbite'),
      options: [...mapOptions(timesValues)],
    },
  ],
};
/* end custom */

const transition = {
  id: 'transition',
  label: __('Transition', 'blockbite'),
  helper: __('Transition', 'blockbite'),
  modifiers: [
    {
      id: 'transition',
      label: __('Transition', 'blockbite'),
      selector: 'transition-',
      options: [...mapOptions(transtionValues)],
    },
  ],
};
const transitionTiming = {
  id: 'transitiontiming',
  label: __('Timing', 'blockbite'),
  helper: __('Transition timing', 'blockbite'),

  modifiers: [
    {
      id: 'transitiontiming',
      label: __('Timing', 'blockbite'),
      selector: 'ease-',
      options: [...mapOptions(transitionTimingValues)],
    },
  ],
};

const transitionDuration = {
  id: 'transitionduration',
  label: __('Duration', 'blockbite'),
  helper: __('Transition duration', 'blockbite'),
  modifiers: [
    {
      id: 'transitionduration',
      label: __('Duration', 'blockbite'),
      selector: 'duration-',
      options: [...mapOptions(transitionDurationValues)],
    },
  ],
};

const transitionDelay = {
  id: 'transitiondelay',
  label: __('Delay', 'blockbite'),
  helper: __('Transition delay', 'blockbite'),

  modifiers: [
    {
      id: 'transitiondelay',
      label: __('Delay', 'blockbite'),
      selector: 'delay-',
      options: [...mapOptions(transitionDelayValues)],
    },
  ],
};

const tile_effects = {
  id: 'tile_effect',
  icon: TailwindIcon,
  label: __('Effects', 'blockbite'),
  modifiers: [
    {
      id: 'tile_in',
      label: __('Tile in', 'blockbite'),
      options: [...mapOptions(tilevalues)],
    },
  ],
};

export const transitionPanel = {
  id: 'transitionpanel',
  icon: TailwindIcon,
  label: __('Transition', 'blockbite'),
  controls: [transition, transitionTiming, transitionDuration, transitionDelay],
};

export const motionEffectsPanel = {
  id: 'motioneffectspanel',
  icon: DimensionsIcon,
  label: __('Animated Effects', 'blockbite'),
  controls: [
    effect,
    direction,
    offset,
    speed,
    delay,
    ease,
    easemove,
    times,
    tile_effects,
  ],
};