import clsx from 'clsx'
import { defineComponent, ref } from 'vue'
import PlusIcon from '~/icons/work/tomato_work_add_icon.png'
import DataImg from '~/icons/work/dataImg.png'
import DateImg from '~/icons/work/dateImg.png'
import ListImg from '~/icons/work/listImg.png'
import AddImg from '~/icons/work/addTarget.png'
import DownImg from "~/icons/work/selectDown1.0.3.png"
import { v4 as uuid } from "uuid"
import List from './modal_view/list'
import { DatePicker, Modal, TimePicker } from 'ant-design-vue'
import type { TomatoTarget } from './useTomatoStore'
import dayjs from 'dayjs'
import useTomatoStore from './useTomatoStore'
import Calendar from './modal_view/calendar'
import DataDetail from './modal_view/DataDetail'
const workTab = [
  {
    title: '目标列表',
    key: 'list',
    icon: ListImg
  },
  {
    title: '目标日历',
    key: 'schedule',
    icon: DateImg
  },
  {
    title: '数据详情',
    key: 'detail',
    icon: DataImg
  }
]
const EditContent = defineComponent(() => {
  const store = useTomatoStore()
  const form = ref<TomatoTarget>(
    store.openShowModel || {
      title: '',
      id: uuid(),
      finishTime: dayjs().valueOf(),
      remindTime: null,
      isCompleted: false
    }
  )
  return () => (
    <div class={'w-full   flex flex-col bg-white items-start  gap-y-2  pl-2'}>
      <span class={'text-[16px] font-bold text-[#333] mt-[10px] text-center flex justify-center w-full'}>新建目标</span>
      <div
        class={'w-full h-[40px] mt-4 relative rounded-lg pl-[50px] bg-black/[0.05]'}
        style={{
          boxShadow: 'inset 0 1px 6px #0000000d'
        }}
      >
        <img
          src={AddImg}
          alt="add img"
          class={'left-4 absolute top-1/2 -translate-y-1/2 w-[15px] h-[16px]'}
        />
        <input
          value={form.value.title}
          onInput={(e: any) => {
            form.value.title = e.target.value
          }}
          type="text"
          placeholder="未命名目标"
          class={'w-full bg-transparent  outline-none text-[14px] text-[#333]  h-full'}
        />
      </div>
      <span class={'text-[#666] text-[14px] my-1'}>添加目标完成时间</span>
      <div class={'flex items-center gap-x-2 '}>
        <div
          onClick={() => {
            form.value.finishTime = dayjs().valueOf()
          }}
          class={clsx(
            ' px-6 py-2 rounded-lg cursor-pointer',
            dayjs(form.value.finishTime).isSame(dayjs(), 'day')
              ? 'bg-[#EBF0FF] text-[#5a6eff]'
              : 'bg-black/[0.05]'
          )}
        >
          今天
        </div>
        <div
          onClick={() => {
            form.value.finishTime = dayjs().add(1, 'day').valueOf()
          }}
          class={clsx(
            ' px-6 py-2 rounded-lg cursor-pointer',
            dayjs(form.value.finishTime).isSame(dayjs().add(1, 'day'), 'day')
              ? 'bg-[#EBF0FF] text-[#5a6eff]'
              : 'bg-black/[0.05]'
          )}
        >
          明天
        </div>
        <div
          class={clsx(
            ' px-6 py-2 rounded-lg cursor-pointer relative',
            !(
              dayjs(form.value.finishTime).isSame(dayjs(), 'day') ||
              dayjs(form.value.finishTime).isSame(dayjs().add(1, 'day'), 'day')
            )
              ? 'bg-[#EBF0FF] text-[#5a6eff]'
              : 'bg-black/[0.05]'
          )}
        >
          {dayjs(form.value.finishTime).format('YYYY-MM-DD')}
          <DatePicker
            class={'absolute opacity-0 left-0 top-0 w-full h-full'}
            onChange={(e) => {
              form.value.finishTime = dayjs(e).valueOf()
            }}
          />
        </div>
      </div>
      <span class={'text-[#666] text-[14px] my-1'}>添加提醒时间</span>
      <div
        class={clsx(
          ' px-6 py-2 rounded-lg cursor-pointer group relative items-center flex gap-x-1',
          (
            form.value.remindTime
          )
            ? 'bg-[#EBF0FF] text-[#5a6eff]'
            : 'bg-black/[0.05]'
        )}
      >
        {
          <>
            {!form.value.remindTime ? '选择时间' : dayjs(form.value.remindTime).format('HH:mm')}
            <img src={DownImg} class={"w-[12px] object-cover "}></img>
            <TimePicker

              class={'absolute opacity-0 left-0 top-0 w-full h-full'}
              onChange={(e) => {
                form.value.remindTime = dayjs(e).valueOf()
              }}
            />
            <div class={"w-[16px] hidden group-hover:flex h-[16px] absolute -right-1 -top-1 bg-[#ddd] rounded-full  items-center justify-center"}
              onClick={() => {
                form.value.remindTime = null
              }}
            >
              <div class={"w-[12px] h-[3px] bg-white"}></div>
            </div>
          </>
        }

      </div>
      <div class={"my-3 w-full text-center flex justify-center"}>
        {
          form.value.title ?
            <button
              onClick={() => {
                const idx = store.state.list.findIndex(val => val.id === form.value.id)
                if (idx !== -1) {
                  store.state.list[idx] = form.value
                } else {
                  store.state.list.push(form.value)

                }
                store.openShowModel = undefined
              }}
              class={"px-10 py-2 font-bold text-[16px] text-white rounded-lg flex items-center justify-center cursor-pointer hover:opacity-90 duration-150"} style={{
                background: 'linear-gradient(225deg,#642FFF 0%,#5162FF 100%)',
                boxShadow: '0 2px 6px #00000026'
              }}>确定</button> :
            <button class={"px-10 py-2 font-bold text-[16px] text-white rounded-lg flex items-center bg-[#bdbdbd] justify-center duration-150"} style={{
              boxShadow: '0 2px 6px #00000026'
            }}>确定</button>

        }

      </div>

    </div>
  )
})
export default defineComponent(() => {
  const select = ref(0)
  const store = useTomatoStore()
  return () => (
    <div class="w-full h-full flex bg-white">
      <Modal
        class={'bg-white p-0 rounded-lg'}
        zIndex={60}
        footer={null}
        centered
        destroyOnClose
        open={store.openShowModel !== undefined}
        onCancel={() => {
          store.openShowModel = undefined
        }}
      >
        <EditContent></EditContent>
      </Modal>
      <div class={'w-[174px] h-full  bg-[#F8F8F8] flex py-10 flex-col items-center'}>
        <div
          onClick={() => {
            store.openShowModel = null
          }}
          class={
            'w-[126px] h-[44px] leading-[44px] shadow-lg rounded-lg justify-center items-center gap-x-1 font-bold text-white flex hover:opacity-90 cursor-pointer '
          }
          style={{
            background: 'linear-gradient(225deg,#5A6EFF 0%,#519DFF 100%)'
          }}
        >
          <img class={'w-[16px] h-[16px]'} src={PlusIcon} alt="" />
          新建目标
        </div>
        <div class={'flex flex-col gap-y-1 mt-5 w-full'}>
          {workTab.map((item, index) => {
            return (
              <div
                onClick={() => {
                  select.value = index
                }}
                class={clsx(
                  'w-full flex  pl-6 items-center py-4 border-l-[8px]  gap-x-2  cursor-pointer',
                  select.value === index
                    ? 'bg-[#90adff2e] text-[#5a6eff] border-[#5a6eff]'
                    : 'text-[#666666] border-transparent hover:bg-[#97aff02e]'
                )}
              >
                <img class={'w-[18px] h-[18px]'} src={item.icon} alt="" />
                <span>{item.title}</span>
              </div>
            )
          })}
        </div>
      </div>
      <div class={'flex-1 w-0 h-full  p-3'}>
        {select.value === 0 ? (
          <List></List>
        ) : select.value === 1 ? (
          <Calendar />
        ) : select.value === 2 ? (
          <DataDetail />
        ) : (
          <>loading</>
        )}
      </div>
    </div>
  )
})