import { InspectorControls } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { 
	PanelBody, 
	TextControl,
	SelectControl,
	ToggleControl,
	ColorPalette,
  Notice
} from "@wordpress/components";
import UrlRedirectPanel from '../../src-side-panel-elem/site-panel-elem/url-redirect-panel';
import { useState, useEffect } from "react";
import { useDispatch } from '@wordpress/data';

const SidePanel = ({ attributes, setAttributes }) => {

  const { lockPostSaving, unlockPostSaving } = useDispatch('core/editor');

  const [isBannerNameValid, setIsBannerNameValid] = useState(true);

  useEffect(() => {
    if (attributes.bannerName === "") {
      attributes.bannerName = "banner-" + Math.random().toString(36).substring(2, 15);
    }
  }, []);

  useEffect(() => {
    if (!isBannerNameValid) {
      lockPostSaving('invalidBannerName');
    } else {
      unlockPostSaving('invalidBannerName');
    }
  }, [isBannerNameValid]);

	return (
		<InspectorControls>
      <PanelBody title="Redirection">
        <ToggleControl
          label="Enable agree button"
          checked={attributes.isAgreeEnabled}
          onChange={(value) => setAttributes({isAgreeEnabled: value})}
        />
        {attributes.isAgreeEnabled && (
          <ToggleControl
            label="Enable redirection"
            checked={attributes.hasRedirect}
            onChange={(value) => setAttributes({hasRedirect: value})}
          />
        )}
        {attributes.isAgreeEnabled && attributes.hasRedirect && (
          <UrlRedirectPanel 
            redirectUrl={attributes.redirectUrl}
            setRedirectUrl={(value) => setAttributes({redirectUrl: value})}
          />
        )}
      </PanelBody>
			<PanelBody title="Banner Settings" initialOpen={true}>
        <ToggleControl
          label="show only on first visit"
          checked={attributes.isFirstVisit}
          onChange={(value) => setAttributes({isFirstVisit: value})}
        />
				<TextControl
						label="Agree Button Text"
						value={attributes.agreeText}
						onChange={(value) => setAttributes({ agreeText: value })}
					/>
					
					<TextControl
						label="Close Button Text"
						value={attributes.closeText}
						onChange={(value) => setAttributes({ closeText: value })}
					/>
					
					<SelectControl
						label="Banner Position"
						value={attributes.position}
						options={[
							{ label: 'Bottom Right', value: 'right' },
							{ label: 'Bottom Left', value: 'left' },
						]}
						onChange={(value) => setAttributes({ position: value })}
					/>
					
					<TextControl
						label="Banner Name"
						value={attributes.bannerName}
						onChange={(value) => {
              if (value === "") {
                setIsBannerNameValid(false);
              } else {
                setIsBannerNameValid(true);
              }
              
              setAttributes({ bannerName: value });
            }}
					/>
          {!isBannerNameValid && (
            <Notice
              status="error"
              isDismissible={false}
              className="orphic-ui-persistent-banner-notice"
            >
              {__("The banner name is used to identify the banner in the code. It must be unique. It can't be empty.", "orphic-ui")}
            </Notice>
          )}
			</PanelBody>

			<PanelBody title={"Style"}>
				<ToggleControl
					label={__("Use custom color", "orphic-ui")} 
					checked={attributes.isCustomColor} 
					onChange={(value) => {setAttributes({isCustomColor: value})}}
				/>
				{attributes.isCustomColor ? (
					<PanelBody title={"Color"}>
						<div style={{display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px"}}>
							<label>{__("Background color", "orphic-ui")}</label>
							<ColorPalette
								enableAlpha={true}
								label={__("Background color", "orphic-ui")}
								value={attributes.backgroundColor}
								onChange={(value) => {setAttributes({backgroundColor: value})}}
							/>
						</div>
						<div style={{display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px"}}>
							<label>{__("Text color", "orphic-ui")}</label>
							<ColorPalette
								enableAlpha={true}
								label={__("Text color", "orphic-ui")}
								value={attributes.textColor}
								onChange={(value) => {setAttributes({textColor: value})}}
							/>
						</div>
						<div style={{display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px"}}>
							<label>{__("Border color", "orphic-ui")}</label>
							<ColorPalette
								enableAlpha={true}
								label={__("Border color", "orphic-ui")}
								value={attributes.borderColor}
								onChange={(value) => {setAttributes({borderColor: value})}}
							/>
						</div>
						<div style={{display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px"}}>
							<label>{__("Primary color", "orphic-ui")}</label>
							<ColorPalette
								enableAlpha={true}
								label={__("Primary color", "orphic-ui")}
								value={attributes.primaryColor}
								onChange={(value) => {setAttributes({primaryColor: value})}}
							/>
						</div>
						<div style={{display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px"}}>
							<label>{__("Primary button background color", "orphic-ui")}</label>
							<ColorPalette
								enableAlpha={true}
								label={__("Primary button background color", "orphic-ui")}
								value={attributes.primaryBg}
								onChange={(value) => {setAttributes({primaryBg: value})}}
							/>
						</div>
						<div style={{display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px"}}>
							<label>{__("Close button background color", "orphic-ui")}</label>
							<ColorPalette
								enableAlpha={true}
								label={__("Close button background color", "orphic-ui")}
								value={attributes.errorBg}
								onChange={(value) => {setAttributes({errorBg: value})}}
							/>
						</div>
						<div style={{display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px"}}>
							<label>{__("Close button text color", "orphic-ui")}</label>
							<ColorPalette
								enableAlpha={true}
								label={__("Close button text color", "orphic-ui")}
								value={attributes.errorText}
								onChange={(value) => {setAttributes({errorText: value})}}
							/>
						</div>
					</PanelBody>
				) : ""}
			</PanelBody>
		</InspectorControls>
	);
};

export default SidePanel;
