import { computed, defineComponent, ref } from 'vue'
import useTomatoStore from '../useTomatoStore'
import NoDataImg from "~/public/icons/work/noData.png"
import clsx from 'clsx'
import dayjs from 'dayjs'
import PlayImg from "~/public/icons/work/work_page-play.png"
export default defineComponent(() => {
  const store = useTomatoStore()
  const searchText = ref('')

  return () => (
    <div class={'w-full h-full p-3 flex flex-col'}>
      <input
        onInput={(e: any) => {
          searchText.value = e.target.value
        }}
        type="text"
        placeholder='搜索目标'
        class={' border-transparent pb-1 border-b-[1px] border-b-[#ddd] overflow-hidden outline-none border-[1px] w-full'}
      />
      <div class="flex flex-1 h-0 w-full  ">
        {
          store.state.list.length === 0 ?
            <div class={"w-full h-full flex items-center flex-col justify-center"}>
              <img src={NoDataImg} alt='no data' class={"w-[300px]"}></img>
              <div class={"text-[#666] text-[14px]"}>暂无目标</div>
            </div>
            : <div class={"w-full  flex flex-col gap-y-2 py-2  pr-1 overflow-y-auto overflow-x-visible  scrollbar-hide "}>
              {
                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                store.state.list.filter(val => val.title.includes(searchText.value)).sort((a, _) => {
                  return !a.isCompleted ? -1 : 1
                }).map((item, idx) => (
                  <div
                    key={item.id}
                    onClick={() => {
                      store.openShowModel = item

                    }}
                    class={clsx("flex justify-between py-2 rounded-lg cursor-pointer relative group  text-[#333] ",
                      item.isCompleted ? "bg-[#e4e4e4]" : "bg-[#EBF0FF] hover:bg-[#5a6eff] hover:text-white "
                    )}>
                    <div class={"w-[50px] flex justify-center items-center"}>
                      <div class={clsx("w-[20px] h-[20px]   flex items-center justify-center rounded-full",
                        item.isCompleted ? "bg-[#d1d1d1]" : "bg-[#9fb7ff] group-hover:bg-white"
                      )}
                        onClick={(e) => {
                          e.stopPropagation()
                          store.state.list[idx].isCompleted = !item.isCompleted
                        }}>
                        {
                          !item.isCompleted &&
                          <div class={"w-[8px] h-[8px] bg-white group-hover:bg-[#9fb7ff] rounded-full"}></div>

                        }
                      </div>
                    </div>
                    <div class={"flex-1 w-0 flex justify-between pr-4"}>

                      <span class={"w-[500px]  text-[14px] whitespace-nowrap text-ellipsis overflow-hidden "}>
                        {item.title}
                      </span>
                      <span class={clsx("text-[#666]  text-[14px]", !item.isCompleted && "group-hover:text-[#ddd]")}>{dayjs(item.finishTime).format('MM月DD日')}</span>

                    </div>

                    <div class={"w-[16px] hidden group-hover:flex z-10 h-[16px] absolute -right-1 -top-1 bg-[#ddd] rounded-full  items-center justify-center"}
                      onClick={() => {
                        const idx = store.state.list.findIndex(val => val.id === item.id)
                        if (idx !== -1) {
                          store.state.list.splice(0, 1)

                        }
                      }}
                    >
                      <div class={"w-[12px] h-[3px] bg-white"}></div>
                    </div>
                  </div>))
              }
            </div>
        }


      </div>
      <div class={"relative  h-[120px] w-full py-1"}>
        <div class={"w-full h-full rounded-lg border-[1px] border-black/20 justify-between flex items-center px-4"}>
          <div class={"flex flex-col text-[16px] gap-y-2"}>
            <span class={" tracking-wide"}>你今日已完成 <span class={"text-[#5b47ff]"}>{store.state.list.filter(val => dayjs(val.finishTime).isSame(dayjs(), 'day') && val.isCompleted).length}</span>个番茄时</span>
            <span class={"text-[#ff8686]"}>不积跬步无以至千里、千里之行始于足下。</span>
          </div>
          <button class={"w-[126px] h-[44px] text-[16px] text-white rounded-lg gap-x-1  font-bold flex items-center justify-center"} style={{
            background: 'linear-gradient(225deg,#642FFF 0%,#5162FF 100%)',
            boxShadow: '0 2px 4px #0003'
          }}
            onClick={() => {
              store.openFullscreen = true
            }}
          >

            <img src={PlayImg} alt="play img " class={"w-[13px]"} />
            开始计时
          </button>
        </div>

      </div>
    </div>
  )
})