import { defineComponent, computed, provide, reactive, ref, } from 'vue';
import UIcon from '../icon/index';
import PageBox from './pageBox.tsx';
import DoubleLeft from './util/DoubleLeft.vue';
import Left from './util/Left.vue';
import DoubleRight from './util/DoubleRight.vue';
import Right from './util/Right.vue';
import Ellipsis from './util/EllipsisHorizontal.vue';
import { useElementHover } from '@vueuse/core';
const pagination = defineComponent({
    name: 'pagination',
    props: {
        current: {
            type: Number,
            default: 0,
        },
        total: {
            type: Number,
            default: 0,
        },
        count: {
            type: Number,
        },
    },
    emits: ['update:current', 'change'],
    setup(props, { emit }) {
        const pageNum = computed(() => {
            return Math.ceil(props.total / 10);
        });
        const displayNums = computed(() => {
            if (!props.count) {
                return new Array(pageNum.value).fill().map((_, index) => index + 1);
            }
            const arr = [];
            let start = props.current - props.count;
            start = Math.max(1, start);
            let end = props.current + props.count;
            end = Math.min(pageNum.value, end);
            for (let i = start; i <= end; i++) {
                arr.push(i);
            }
            return arr;
        });
        console.log(displayNums.value);
        const displayEndCount = computed(() => { });
        const changeCurrent = (newNum) => {
            if (newNum == props.current) {
                return;
            }
            emit('update:current', newNum);
            emit('change', newNum);
        };
        provide('current', reactive({
            paginationProps: props,
            pageNum: pageNum.value,
            changeCurrent,
        }));
        const LeftStep = (<PageBox boxType="leftStep">
        <UIcon>
          <Left></Left>
        </UIcon>
      </PageBox>);
        const LeftMore = (state) => {
            return (<PageBox boxType="leftMore">
          <UIcon>{state ? <DoubleLeft /> : <Ellipsis />}</UIcon>
        </PageBox>);
        };
        const RightMore = (state) => {
            return (<PageBox boxType="rightMore">
          <UIcon>{state ? <DoubleRight /> : <Ellipsis />}</UIcon>
        </PageBox>);
        };
        const RightStep = (<PageBox boxType="rightStep">
        <UIcon>
          <Right></Right>
        </UIcon>
      </PageBox>);
        const left = ref(null);
        const right = ref(null);
        const isLeftChecked = useElementHover(left);
        const isRightChecked = useElementHover(right);
        return () => (<div class="u-pagination">
        <LeftStep />
        {props.current - props.count >= 2 && <PageBox boxType="num" no={1}/>}
        {props.current - props.count >= 3 && (<div ref={left}>{LeftMore(isLeftChecked.value)}</div>)}

        {displayNums.value.map((item, index) => {
                return (<PageBox boxType="num" isChecked={props.current == item} no={item}></PageBox>);
            })}
        {props.current + props.count < pageNum.value - 1 && (<div ref={right}>{RightMore(isRightChecked.value)}</div>)}
        {props.current + props.count < pageNum.value && (<PageBox boxType="num" no={pageNum.value}/>)}

        <RightStep />
      </div>);
    },
});
export default pagination;