import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
import { classNames } from '../helpers';

const { useState, useRef, useEffect } = wp.element;

const SuggestedKeywords = ( {
	className,
	keywordClassName,
	keywords,
	onClick,
	...props
} ) => {
	const [ scrollPosition, setScrollPosition ] = useState( 0 );
	const [ showLeftArrow, setShowLeftArrow ] = useState( false );
	const [ showRightArrow, setShowRightArrow ] = useState( false );
	const containerRef = useRef( null );

	useEffect( () => {
		if ( ! containerRef.current ) {
			return;
		}
		const { scrollWidth, clientWidth } = containerRef.current;
		setShowLeftArrow( scrollPosition > 0 );
		setShowRightArrow( scrollPosition < scrollWidth - clientWidth );
	}, [ keywords, scrollPosition ] );

	const handleOnClick = ( keyword ) => () => {
		if ( typeof onClick === 'function' ) {
			onClick( keyword );
		}
	};

	const handleScroll = ( event ) => {
		const { scrollLeft, scrollWidth, clientWidth } = event.target;
		setScrollPosition( scrollLeft );
		setShowLeftArrow( scrollLeft > 0 );
		setShowRightArrow( scrollLeft < scrollWidth - clientWidth );
	};

	const scrollTo = ( element, position ) => {
		if ( ! element ) {
			return;
		}
		element.scrollTo( {
			left: position,
			behavior: 'smooth',
		} );
	};

	const handleLeftArrowClick = () => {
		scrollTo( containerRef.current, 0 );
	};

	const handleRightArrowClick = () => {
		const container = containerRef.current;
		scrollTo( container, container.scrollWidth );
	};

	return (
		<div
			className={ classNames(
				'relative flex flex-row items-start',
				className
			) }
			{ ...props }
		>
			{ showLeftArrow && (
				<div
					className="absolute inset-y-0 left-0 px-1.5 py-0.5 cursor-pointer text-zip-app-inactive-icon hover:text-zip-app-inactive-icon bg-gradient-to-r from-70% from-white to-transparent transition duration-150 ease-in-out border-none bg-transparent"
					onClick={ handleLeftArrowClick }
				>
					<ChevronLeftIcon className="w-6 h-6" />
				</div>
			) }
			<div
				className="flex flex-row flex-nowrap gap-2 overflow-x-auto hide-scrollbar"
				ref={ containerRef }
				onScroll={ handleScroll }
			>
				{ keywords.map( ( keyword, index ) => (
					<div
						key={ index }
						className={ classNames(
							'px-3 py-1 text-sm font-normal leading-5 rounded-full shadow-sm cursor-pointer text-app-text  whitespace-nowrap border border-solid border-zip-light-border-primary bg-background-secondary',
							keywordClassName
						) }
						onClick={ handleOnClick( keyword ) }
						aria-hidden="true"
					>
						{ keyword }
					</div>
				) ) }
			</div>
			{ showRightArrow && (
				<div
					className="absolute inset-y-0 right-0 px-1.5 py-0.5 cursor-pointer text-zip-app-inactive-icon hover:text-zip-app-inactive-icon bg-gradient-to-l from-70% from-white to-transparent transition duration-150 ease-in-out border-none bg-transparent"
					onClick={ handleRightArrowClick }
				>
					<ChevronRightIcon className="w-6 h-6" />
				</div>
			) }
		</div>
	);
};

export default SuggestedKeywords;
@vc_gitem_min_height: 50px;
@vc_gitem_element_margin_bottom: 5px;
@vc_gitem_round_radius: 3px;
// Base
.vc_gitem-shortcode {
  margin: 10px auto 0;
  width: 96%;
  .vc_control {
    font-size: 13px;
  }
  .column_edit {
    font-size: 14px;
  }
  > .vc-controls {
    .vc-icon {
      background-image: url('../vc/fe/controls.png');
      background-repeat: no-repeat;
    }
  }
  .vc_shortcodes_container {
    background: transparent;
    > .wpb_element_wrapper > .vc_container_for_children {
      outline: 0;
    }
    .controls_column {
      overflow: hidden;
    }
  }
  // Set content elements fixes
  //.wpb_content_element {
  //  > .vc_controls {
  //    display: block;
  //    height: auto;
  //    visibility: visible;
  //    .opacity(1);
  //    -webkit-transform: none;
  //    -ms-transform: none;
  //    transform: none;
  //    > div {
  //      white-space: normal;
  //    }
  //    > .vc_controls-cc {
  //      -webkit-transform: none;
  //      -ms-transform: none;
  //      -o-transform: none;
  //      transform: none;
  //      position: static;
  //    }
  //    .vc_control-btn-clone {
  //      display: none;
  //    }
  //    .vc_control-btn-delete {
  //      .vc_btn-content {
  //        border-bottom-right-radius: 3px;
  //        border-top-right-radius: 3px;
  //      }
  //    }
  //    .vc_control-btn-delete, .vc_control-btn-edit {
  //      display: block;
  //      float: right;
  //      margin: 0px;
  //    }
  //  }
  //  > .wpb_element_wrapper {
  //    display: none;
  //  }
  //}
  //.vc_controls {
  //  min-height: 26px;
  //}
  //.vc_controls > div > :last-child .vc_btn-content {
  //  border-radius: 0;
  //}
  //.vc_btn-content {
  //  padding: 6px 3px;
  //}
  //.wpb_row_container > .wpb_vc_column {
  //  margin-bottom: 4px;
  //}
  //.vc_shortcodes_container .wpb_vc_gitem_col .wpb_column_container {
  //  margin: 0;
  //}
  //
  //.wpb_row_container > .wpb_vc_gitem_col > .wpb_element_wrapper {
  //  padding: 1px 4px;
  //}
  //.vc_empty-container {
  //  min-height: 32px;
  //}
  //.vc_element-name .vc_btn-content {
  //  padding: 6px 6px !important;
  //}
  //.vc_element-move .vc_btn-content {
  //  cursor: move !important;
  //  padding-left: 21px !important;
  //}
  //.vc_element-move .vc-c-icon-dragndrop {
  //  left: 11px;
  //}
}

.vc_gitem-add-c-col {
  vertical-align: top;
  margin-top: 10px;
  margin-bottom: 10px;
  outline: 1px dotted #e6e6e6;
  min-height: @vc_gitem_min_height;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  &::before {
    font-family: 'vcpb-plugin-icons' !important;
    content: @vc-c-icon-add_element;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    color: #848c92;
    font-size: 20px;
  }

  .vc_gitem-add-c-left &, .vc_gitem-add-c-right & {
    padding-top: 26px;
  }
  &:hover {
    .opacity(0.5);
  }
  &.vc_zone-added {
    outline: 0;
    background: none;
    .vc_gitem-add-c-bottom & {
      margin-top: 30px;
    }
    &:hover {
      .opacity(1);
    }
  }
}

.vc_gitem-navbar-dropdown {
  padding: 15px;
}

#wpb_visual_composer {
  a {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
}

@import "preview.less";
@import "shortcodes/vc_gitem_animated_block_admin.less";
@import "shortcodes/vc_gitem_zone_admin.less";
@import "shortcodes/vc_gitem_row_admin.less";:root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,161;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px;--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color)}@media(min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.product-add-category__tree-control{margin-top:8px}.product-add-category__tree-control .woocommerce-tree-select-control .components-base-control,.product-add-category__tree-control .woocommerce-tree-select-control .woocommerce-tree-select-control__tree{padding:0 5px}.product-add-category__tree-control .woocommerce-tree-select-control .components-checkbox-control__label{min-height:36px}.product-add-category__tree-control .woocommerce-tree-select-control__tags{display:none}.product-add-category__tree-control .woocommerce-tree-select-control .components-base-control .woocommerce-tree-select-control__control-input,.product-add-category__tree-control .woocommerce-tree-select-control .woocommerce-tree-select-control__option{font-size:12px}.product-add-category__tree-control .woocommerce-tree-select-control .components-checkbox-control__input{height:16px;width:16px}.product-add-category__tree-control .woocommerce-tree-select-control .components-checkbox-control__checked{height:20px;width:20px}.categorydiv.category-async-metabox #product_cat-all{overflow:visible}.categorydiv.category-async-metabox #product_cat-all .categorychecklist{max-height:140px;margin-right:0}.categorydiv.category-async-metabox #product_cat-all .categorychecklist>li{display:flex;align-items:center;margin-left:12px}.categorydiv.category-async-metabox #product_cat-all .categorychecklist .ntdelbutton{position:relative;margin:0}.categorydiv.category-async-metabox .woocommerce-experimental-select-control__combo-box-wrapper{min-height:30px;border-radius:4px}.categorydiv.category-async-metabox .woocommerce-experimental-select-control__menu-item{padding:5px 12px}.categorydiv.category-async-metabox .category-add__error{color:#d94f4f}// Import all steps.
import SiteList from './site-list';
import SiteListHeader from './site-list/header';
import CustomizeSite from './customize-site';
import ImportSite from './import-site';
import Survey from './survey';
import SiteType from './site-type';
import FeaturesStep from './features';
import PageBuilder from './page-builder';

export const STEPS = [
	{
		name: 'page-builder',
		header: <SiteListHeader />,
		content: <SiteType />,
		class: 'step-page-builder',
	},
	{
		name: 'classic-page-builder',
		header: <SiteListHeader />,
		content: <PageBuilder />,
		class: 'step-page-builder',
	},
	{
		name: 'site-list',
		header: <SiteListHeader />,
		content: <SiteList />,
		class: 'step-site-list',
	},
	{
		name: 'customizer',
		content: <CustomizeSite />,
		class: 'step-customizer',
	},
	{
		name: 'features',
		content: <FeaturesStep />,
		class: 'step-feature',
	},
	{
		name: 'survey',
		content: <Survey />,
		class: 'step-survey',
	},
	{
		name: 'import-site',
		title: 'We are buiding your website...',
		content: <ImportSite />,
		class: 'step-import-site',
	},
];
No access.