import { Chart } from '../../js/chart-wrapper';
import { PanelBody, PanelRow, TextControl, Flex, FlexItem } from '@wordpress/components';
import SidebarAutocomplete from '../components/autocomplete/institution/sidebar-autocomplete'
import {
	useBlockProps,
	InspectorControls,
} from '@wordpress/block-editor';

export default function Edit({ attributes, setAttributes }) {
    const handleSelectChange = (newValue) => {
      setAttributes( { graph_meta_data: newValue } );
    };

    const blockProps = useBlockProps();

    const onChangeTitle = ( titleUpdated ) => {
      setAttributes( { graph_title: titleUpdated } );
    }

    const onChangeCustomWidth = ( widthUpdated ) => {
      setAttributes( { custom_size_width: widthUpdated } );
    };
  
    const onChangeCustomHeight = ( heightUpdated ) => {
      setAttributes( { custom_size_height: heightUpdated } );
    };

    const onChangeCustomMaxItem = ( maxItemUpdated ) => {
      setAttributes( { custom_max_item: maxItemUpdated } );
    };

    const options = {
        title: attributes.graph_title,
        legend: {
          position: 'bottom',
          alignment: 'end'
        },        
    };

    const chartEvents = [
        {
          eventName: "select",
          callback({ chartWrapper }) {
            console.log("Selected ", chartWrapper.getChart().getSelection());
          },
        },
        {
          eventName: "ready",
          callback({ chartWrapper }) {
            setAttributes({graph_image_data: chartWrapper.getChart().getImageURI()})
          },
        },
        {
          eventName: "error",
          callback(args) {
            console.log("Chart errored. ", args);
          },
        },
      ];

    return (
        <div {...blockProps}>
            <InspectorControls key="setting">
              <div>
                <fieldset>
                  <Flex>
                    <PanelBody title="Configurações gráfico" initialOpen={true}>
                        <PanelRow>
                        <TextControl
                              label="Título"
                              placeholder='Título'
                              value={ attributes.graph_title }
                              onChange={ ( value ) => onChangeTitle( value ) }
                            />
                        </PanelRow>
                        <PanelRow>
                          <FlexItem>
                            <TextControl
                              label="Limite de itens"
                              value={ attributes.custom_max_item }
                              onChange={ ( value ) => onChangeCustomMaxItem( value ) }
                            />
                          </FlexItem>
                        </PanelRow>                        
                        <PanelRow>
                          <FlexItem>
                            <TextControl
                              label="Altura"
                              placeholder='px'
                              value={ attributes.custom_size_height }
                              onChange={ ( value ) => onChangeCustomHeight( value ) }
                            />
                          </FlexItem>
                          <FlexItem>
                            <TextControl
                              label="Largura"
                              placeholder='px'
                              value={ attributes.custom_size_width }
                              onChange={ ( value ) => onChangeCustomWidth( value ) }
                            />
                          </FlexItem>
                        </PanelRow>
                      </PanelBody>                          
                  </Flex>
                  <Flex>
                    <FlexItem>
                        <SidebarAutocomplete
                          onChange={handleSelectChange}
                          limit={attributes.custom_max_item}
                        />
                    </FlexItem>
                  </Flex>
                </fieldset>
              </div>
            </InspectorControls>
            <div
            			style={ {
                    width: isNaN(attributes.custom_size_width) || attributes.custom_size_width === '__IMAGE__' 
                      ? '150px' 
                      : attributes.custom_size_width + 'px',
                    height: isNaN(attributes.custom_size_height) || attributes.custom_size_height === '__IMAGE__' 
                      ? '150px' 
                      : attributes.custom_size_height + 'px',
                    marginInline: 'auto',
                  } }
            >

              <Chart
                chartType="PieChart"
                data={attributes.graph_meta_data}
                options={options}
                width="100%"
                height="100%"
                chartEvents={chartEvents}
                />
            </div>
        </div>
    );
}