import {
	useState,
	useMemo,
} from '@wordpress/element';

import {useSortable} from '@dnd-kit/sortable';
import {CSS} from '@dnd-kit/utilities';

import {
	Flex,
	FlexBlock,
	FlexItem,
	Tooltip,
} from '@wordpress/components';


import SubControls from './SubControls';

import { __ } from '@wordpress/i18n';


type Props = {
	id: string;
	label: string;
	value?: any;
	sortLabel: string;
	isActive: boolean;
	disabled?: boolean;
	subControls?: string[];
	onActive: () => void;
}

export default function SortableItem(props: Props) {
  const {
    attributes,
    listeners,
		isDragging,
    setNodeRef,
		setActivatorNodeRef,
    transform,
    transition,
  } = useSortable({id: props.id, disabled: props.disabled || false });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

	// console.log(props);

	const [isOpen, setIsOpen] = useState<boolean>(false);

	const toggleAccordion = () => {
		setIsOpen(!isOpen);
	};

	const subControlIds = useMemo(() => props.subControls ?? [], [props.subControls]);


	const wrapClasses = `apura-sortable-item${props.isActive ? '' : ' is-hidden'}`;

	return (
		<div
			className={wrapClasses}
			ref={setNodeRef}
			style={style}
		>
			<Flex>
				{props.disabled ? (
					<Tooltip text={__('This item is fixed and cannot be moved.', 'apura')}>
						<span className="apura-sortable-item__locked" aria-label={__('This item is fixed and cannot be moved.', 'apura')}>
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" strokeWidth={2} className="apura-icon apura-icon-lock"><path d="M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M18 8h1a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3h1V6a7 7 0 0 1 14 0v2zM8 8h8V6a4 4 0 0 0-8 0v2z"/></svg>
						</span>
					</Tooltip>
				) : (
					<FlexItem
						ref={setActivatorNodeRef}
						{...attributes}
						{...listeners}
						style={{ cursor: isDragging ? "grabbing" : "move" }}
						className="apura-sortable-item__handle"
						title={props.sortLabel}
					>
						<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" strokeWidth={2} className="apura-icon apura-icon-sort"><path fillRule="evenodd" clipRule="evenodd" d="M16 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M16 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M8 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M16 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M8 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fillRule="evenodd" clipRule="evenodd" d="M8 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>
					</FlexItem>
				)}

				<FlexBlock>
					{props.label}
				</FlexBlock>
				{subControlIds.length > 0 &&
					<FlexItem>
						<button type="button" className="apura-component-button sub-controls-toggle" onClick={toggleAccordion} disabled={!props.isActive}>
							{isOpen ? <span className="dashicons dashicons-arrow-up-alt2"></span> : <span className="dashicons dashicons-arrow-down-alt2"></span>}
						</button>
					</FlexItem>
				}
				<FlexItem>
				<button type='button'
					className='apura-component-button'
					onClick={props.onActive}
				>
					{props.isActive ? <span className="dashicons dashicons-visibility"></span>
						: <span className="dashicons dashicons-hidden"></span>
					}
				</button>
				</FlexItem>

			</Flex>
			{
			subControlIds.length > 0 && props.isActive &&
			<SubControls
				subControlIds={subControlIds}
				isOpen={isOpen}
			/>
		}


	</div>
	);
}