import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import {
  PanelBody,
  Button,
  ButtonGroup,
  __experimentalInputControl as InputControl,
} from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';

import { ToggleSwitch } from '@components/ui/ToggleSwitch';
import SingleBlockTypeAppender from '@components/ui/SingleBlockTypeAppender';

export default function CarouselControls({ attributes, setAttributes }) {
  const { carouselSettings } = attributes;
  const [settings, setSettings] = useState({ ...carouselSettings });

  useEffect(() => {
    setAttributes({
      ...attributes,
      carouselSettings: settings,
    });
  }, [settings]);

  useEffect(() => {
    setSettings(carouselSettings);
  }, []);

  const defaultSlidesPerViewOptions = Array.from(
    { length: 3 },
    (_, i) => i + 1
  );

  const viewPorts = [
    {
      title: 'Mobile',
      id: 'xs',
    },
    {
      title: 'Tablet',
      id: 'md',
    },
    {
      title: 'Desktop',
      id: 'lg',
    },
  ];

  const [slidesPerViewVisible, setSlidesPerViewVisible] = useState(false);
  const [slidesPerViewCustom, setSlidesPerViewCustom] = useState({
    xs: !defaultSlidesPerViewOptions.includes(settings.slidesPerView.xs),
    md: !defaultSlidesPerViewOptions.includes(settings.slidesPerView.md),
    lg: !defaultSlidesPerViewOptions.includes(settings.slidesPerView.lg),
  });

  return (
    <>
      <InspectorControls>
        <PanelBody title={'Carousel Settings'} initialOpen={true}>
          <div className="flex flex-col gap-4">
            <SingleBlockTypeAppender buttonText="Add Slide" />
            <ToggleSwitch
              checked={settings.cssMode}
              onChange={(bool) => setSettings({ ...settings, cssMode: bool })}
              label="Css Mode"
            />
            <ToggleSwitch
              checked={settings.navigation}
              onChange={(bool) =>
                setSettings({ ...settings, navigation: bool })
              }
              label="Show navigation"
            />
            <ToggleSwitch
              checked={settings.pagination?.type === 'bullets'}
              onChange={(bool) =>
                setSettings({
                  ...settings,
                  pagination: bool
                    ? { type: 'bullets', clickable: true }
                    : null,
                })
              }
              label="Pagination"
            />
            <ToggleSwitch
              checked={settings.pagination?.type === 'fraction'}
              onChange={(bool) =>
                setSettings({
                  ...settings,
                  pagination: bool
                    ? { type: 'fraction', clickable: true }
                    : null,
                })
              }
              label="Pagination (numbers)"
            />
            <ToggleSwitch
              checked={settings.speed === 500}
              onChange={(bool) =>
                setSettings({ ...settings, speed: bool ? 500 : 0 })
              }
              label="Animation"
            />
            <ToggleSwitch
              checked={settings.loop}
              onChange={(bool) => setSettings({ ...settings, loop: bool })}
              label="Loop"
            />
            <ToggleSwitch
              checked={settings.autoplay?.delay === 3000}
              onChange={(bool) =>
                setSettings({
                  ...settings,
                  autoplay: bool
                    ? { delay: 3000, disableOnInteraction: false }
                    : null,
                })
              }
              label="Autoplay (3s delay)"
            />
            <ToggleSwitch
              checked={settings.autoplay?.delay === 5000}
              onChange={(bool) =>
                setSettings({
                  ...settings,
                  autoplay: bool
                    ? { delay: 5000, disableOnInteraction: false }
                    : null,
                })
              }
              label="Autoplay (5s delay)"
            />
            <ToggleSwitch
              checked={settings.autoplay === null}
              onChange={(bool) =>
                setSettings({
                  ...settings,
                  autoplay: bool ? null : settings.autoplay,
                })
              }
              label="Autoplay off"
            />
            <Button
              isSecondary
              onClick={() => setSlidesPerViewVisible((prev) => !prev)}
            >
              Slides per view
            </Button>
            {slidesPerViewVisible && (
              <div className="w-[270px] overflow-auto px-4 pb-1">
                <ul role="list" className="divide-gray-light divide-y">
                  {viewPorts.map((v) => (
                    <li key={v.id} className="mb-0 py-3">
                      <div className="mb-2.5 text-[10px] font-medium uppercase opacity-50">
                        {v.title}
                      </div>
                      <div className="flex items-center">
                        <ButtonGroup>
                          {defaultSlidesPerViewOptions.map((o) => (
                            <Button
                              key={o}
                              className={
                                settings.slidesPerView[v.id] === o
                                  ? 'bg-blue-500 text-white'
                                  : ''
                              }
                              onClick={() => {
                                setSlidesPerViewCustom({
                                  ...slidesPerViewCustom,
                                  [v.id]: false,
                                });

                                setSettings({
                                  ...settings,
                                  slidesPerView: {
                                    ...settings.slidesPerView,
                                    [v.id]: o,
                                  },
                                });
                              }}
                            >
                              {o}
                            </Button>
                          ))}
                          <Button
                            className={
                              settings.slidesPerView[v.id] === true
                                ? 'bg-blue-500 text-white'
                                : ''
                            }
                            onClick={() => {
                              setSettings({
                                ...settings,
                                slidesPerView: {
                                  ...settings.slidesPerView,
                                  [v.id]: 4,
                                },
                              });

                              setSlidesPerViewCustom({
                                ...slidesPerViewCustom,
                                [v.id]: true,
                              });
                            }}
                          >
                            Custom
                          </Button>
                        </ButtonGroup>
                        {slidesPerViewCustom[v.id] && (
                          <InputControl
                            type="number"
                            value={settings.slidesPerView[v.id]}
                            className="ml-2 w-12"
                            onChange={(val) => {
                              if (!val) {
                                return;
                              }
                              setSettings({
                                ...settings,
                                slidesPerView: {
                                  ...settings.slidesPerView,
                                  [v.id]: parseFloat(val),
                                },
                              });
                            }}
                          />
                        )}
                      </div>
                    </li>
                  ))}
                  <li className="mb-0 py-3">
                    <div className="mb-2.5 text-[10px] font-medium uppercase opacity-50">
                      Space between slides
                    </div>
                    <InputControl
                      type="number"
                      value={settings?.spaceBetween || 0}
                      className="w-20"
                      onChange={(val) => {
                        setSettings({
                          ...settings,
                          spaceBetween: !!val ? parseInt(val) : 0,
                        });
                      }}
                      suffix="px"
                    />
                  </li>
                </ul>
              </div>
            )}
          </div>
        </PanelBody>
      </InspectorControls>
    </>
  );
}