<?php
namespace SabaiApps\Directories\Component\Display\Element;

use SabaiApps\Directories\Component\Entity\Model\Bundle;
use SabaiApps\Directories\Component\Display\Model\Display;
use SabaiApps\Directories\Component\Display\Model\Element;
use SabaiApps\Directories\Component\Form\Form;

class ColumnElement extends AbstractElement {

	protected function _displayElementInfo( Bundle $bundle ) {
		return array(
			'type'                => 'utility',
			'label'               => _x( 'Column', 'display element name', 'directories-pro' ),
			'default_settings'    => array(
				'width'      => 4,
				'responsive' => array(
					'xs'   => array( 'width' => 12 ),
					'xsm'  => array( 'width' => 'inherit' ),
					'sm'   => array( 'width' => 'inherit' ),
					'md'   => array( 'width' => 'inherit' ),
					'lg'   => array( 'width' => 'inherit' ),
					'xl'   => array( 'width' => 'inherit' ),
					'xxl'  => array( 'width' => 'inherit' ),
					'grow' => true,
				),
				'hide_empty' => true,
			),
			'containable'         => true,
			'parent_element_name' => 'columns',
			'icon'                => 'fas fa-columns',
			'designable'          => array( 'padding' ),
			'labellable'          => true,
			'buttonable'          => true,
			'iconable'            => true,
		);
	}

	public function displayElementSettingsForm( Bundle $bundle, array $settings, Display $display, array $parents = array(), $tab = null, $isEdit = false, array $submitValues = array() ) {
		$widths = $this->_getWidthOptions();
		$form   = array(
			'width'      => array(
				'#title'         => __( 'Column width', 'directories-pro' ),
				'#type'          => 'select',
				'#options'       => $widths + array(
					'responsive' => __( 'Responsive', 'directories-pro' ),
				),
				'#default_value' => $settings['width'],
				'#horizontal'    => true,
			),
			'responsive' => array(
				'#states'           => array(
					'visible' => array(
						sprintf( 'select[name="%s"]', $this->_application->Form_Form_fieldName( array_merge( $parents, array( 'width' ) ) ) ) => array( 'value' => 'responsive' ),
					),
				),
				'#element_validate' => array(
					function ( Form $form, &$value, $element ) use ( $parents ) {
						if ( $form->getValue( array_merge( $parents, array( 'width' ) ) ) !== 'responsive' ) {
							return;
						}

						foreach ( array( 'xxl', 'xl', 'lg', 'md', 'sm', 'xsm', 'xs' ) as $key ) {
							if ( ! empty( $value[ $key ]['width'] )
								&& $value[ $key ]['width'] !== 'inherit'
							) {
								$width = $value[ $key ]['width'];

								break;
							}
						}
						if ( empty( $width ) ) {
							$form->setError( __( 'Please select at least one non-empty width.', 'directories-pro' ), $element );
						}
					},
				),
			),
			'hide_empty' => array(
				'#type'          => 'checkbox',
				'#title'         => __( 'Hide if empty', 'directories-pro' ),
				'#default_value' => ! empty( $settings['hide_empty'] ),
				'#horizontal'    => true,
			),
		);
		foreach ( $this->_getResponsiveWidthOptions() as $key => $title ) {
			$options = array( 0 => __( 'Hidden', 'directories-pro' ) ) + $widths;
			if ( $can_inherit = isset( $can_inherit ) ) {
				$options = array( 'inherit' => __( 'Inherit from smaller', 'directories-pro' ) ) + $options;
				$default = 'inherit';
			} else {
				$default = 12;
			}
			if ( isset( $settings['responsive'][ $key ]['width'] ) ) {
				$current_value = $settings['responsive'][ $key ]['width'];
				if ( $current_value !== 'inherit' ) {
					$current_value = (int) $current_value;
				}
			} else {
				$current_value = $default;
			}
			$form['responsive'][ $key ] = array(
				'width' => array(
					'#field_prefix'  => $title,
					'#type'          => 'select',
					'#options'       => $options,
					'#default_value' => $current_value,
					'#horizontal'    => true,
					'#description'   => sprintf(
						__( 'Select the display width of this column when the container of the column is %s.', 'directories-pro' ),
						$title
					),
					'#empty_value'   => $can_inherit ? 'inherit' : null,
					'#attributes'    => array( 'class' => DRTS_BS_PREFIX . 'form-select' ),
				),
			);
		}
		$form['responsive']['grow'] = array(
			'#type'          => 'checkbox',
			'#horizontal'    => true,
			'#title'         => __( 'Stretch to fill space', 'directories-pro' ),
			'#default_value' => ! empty( $settings['responsive']['grow'] ),
		);

		return $form;
	}

	protected function _getResponsiveWidthOptions() {
		return array(
			'xs'  => '< 360px',
			'xsm' => '>= 360px',
			'sm'  => '>= 576px',
			'md'  => '>= 768px',
			'lg'  => '>= 992px',
			'xl'  => '>= 1200px',
			'xxl' => '>= 1400px',
		);
	}

	protected function _getWidthOptions() {
		return array(
			2  => '1/6',
			3  => '1/4',
			4  => '1/3',
			5  => '5/12',
			6  => '1/2',
			7  => '7/12',
			8  => '2/3',
			9  => '3/4',
			10 => '5/6',
			12 => __( 'Full width', 'directories-pro' ),
		);
	}

	public function displayElementAdminAttr( Bundle $bundle, array $data ) {
		$settings = $data['settings'];
		if ( $settings['width'] !== 'responsive' ) {
			$width = $settings['width'];
			$grow  = 0;
		} else {
			$width = 12;
			foreach ( array( 'xxl', 'xl', 'lg', 'md', 'sm', 'xs' ) as $key ) {
				if ( ! empty( $settings['responsive'][ $key ]['width'] )
					&& $settings['responsive'][ $key ]['width'] !== 'inherit'
				) {
					$width = $settings['responsive'][ $key ]['width'];

					break;
				}
			}
			$grow = empty( $settings['responsive']['grow'] ) ? 0 : 1;
		}
		$width = ( 100 * $width / 12 ) . '%';
		return array(
			// min-width:0 for firefox bug with flex items: https://github.com/philipwalton/flexbugs/issues/39
			'style'              => 'flex:' . $grow . ' 0 ' . $width . ';width:' . $width . ';min-width:0;',
			'data-element-width' => $width,
		);
	}

	public function displayElementRender( Bundle $bundle, array $element, $var, ?array $context = null ) {
		$force_output = isset( $element['settings']['hide_empty'] ) && empty( $element['settings']['hide_empty'] );
		if ( ! $html = $this->_renderChildren( $bundle, $element['children'], $var, $context ) ) {
			if ( ! $force_output ) {
				return;
			}

			$html = '';
		} else {
			$html = implode( PHP_EOL, $html );
		}

		$class = '';
		if ( $element['settings']['width'] !== 'responsive' ) {
			$width  = (int) $element['settings']['width'];
			$class .= ' drts-col-' . $width;
		} else {
			$is_hidden = false;
			$grow      = ! empty( $element['settings']['responsive']['grow'] );
			unset( $element['settings']['responsive']['grow'] );
			foreach ( $element['settings']['responsive'] as $key => $width ) {
				if ( ! isset( $width['width'] )
					|| ! strlen( $width['width'] )
					|| $width['width'] === 'inherit'
				) {
					continue;
				}

				if ( ! $_width = intval( $width['width'] ) ) {
					$is_hidden = true;
					$class    .= ' drts-' . ( $key === 'xs' ? 'd-none' : $key . '-d-none' );
				} else {
					if ( $is_hidden ) {
						$class    .= ' drts-' . $key . '-d-block';
						$is_hidden = false;
					}
					$class .= ' drts-col-' . ( $key === 'xs' ? $_width : $key . '-' . $_width );
					if ( $grow ) {
						$class .= ' drts-' . ( $key === 'xs' ? 'grow' : $key . '-grow' );
					}
				}
			}
		}

		return array(
			'class'        => $class,
			'html'         => $html,
			'force_output' => $force_output,
		);
	}

	protected function _displayElementReadableInfo( Bundle $bundle, Element $element ) {
		$settings = $element->data['settings'];
		$ret      = array(
			'width' => array(
				'label' => __( 'Column width', 'directories-pro' ),
			),
		);
		$widths   = $this->_getWidthOptions();
		if ( $settings['width'] === 'responsive' ) {
			$ret['width']['value'] = __( 'Responsive', 'directories-pro' );
			$widths[0]             = __( 'Hidden', 'directories-pro' );
			$widths['inherit']     = __( 'Inherit from smaller', 'directories-pro' );
			foreach ( $this->_getResponsiveWidthOptions() as $key => $title ) {
				if ( isset( $settings['responsive'][ $key ]['width'] ) ) {
					$value = $this->_application->H( $widths[ $settings['responsive'][ $key ]['width'] ] );
				} else {
					$value = __( 'Inherit from smaller', 'directories-pro' );
				}
				$ret[ 'responsive-' . $key ] = array(
					'label'   => $title,
					'value'   => $value,
					'is_html' => true,
				);
			}
			$ret['responsive-grow'] = array(
				'label'   => __( 'Stretch to fill space', 'directories-pro' ),
				'value'   => ! empty( $settings['responsive']['grow'] ),
				'is_bool' => true,
			);
		} else {
			$ret['width']['value'] = $widths[ $settings['width'] ];
		}

		return array( 'settings' => array( 'value' => $ret ) );
	}
}
