import {View, Image, Text, Navigator} from '@tarojs/components';
import classNames from 'classnames';
import sendIcon from '@assets/sending.svg';
import complateIcon from '@assets/complate.svg';
import orderIcon from '@assets/order.svg';
import face from '@assets/face.svg';
import Login from './login';
import {useBoolean} from 'ahooks';
import {DELIVER_GOODS_PATH} from '@routes';

const btnList = [
  {
    title: '收发货',
    children: [
      {title: '发货', icon: sendIcon, url: DELIVER_GOODS_PATH},
      {title: '收货', icon: complateIcon, url: ''},
    ],
  },
  {title: '历史记录', children: [{title: '订单', icon: orderIcon, url: ''}]},
];

export default function App() {
  const [visible, {toggle, setFalse}] = useBoolean();

  return (
    <>
      <View
        className={classNames(
          'w-screen h-screen overflow-auto pt-20  px-4',
          'bg-gradient-to-br from-[#DEF6FE] to-[#F4F6F8]',
        )}
      >
        <View className='flex items-center' onClick={toggle}>
          <Image
            className='w-14 h-14 rounded-full'
            src={face}
            mode='widthFix'
          />

          <View className='flex-1 ps-4'>
            <Text className='block text-base text-[#333]'>登录</Text>
          </View>
        </View>

        {btnList.map(function (el, index) {
          return (
            <View
              key={el.title}
              className={classNames(
                'bg-white py-3 px-5 rounded-lg shadow-lg',
                index === 0 ? 'mt-20' : 'mt-6',
              )}
            >
              <Text className='block text-lg font-semibold text-black'>
                {el.title}
              </Text>

              <View className='mt-3 grid grid-cols-4 grid-rows-1 gap-4'>
                {el.children.map(function (item) {
                  return (
                    <Navigator url={item.url} key={item.title}>
                      <Image
                        src={item.icon}
                        className='w-8 h-8 mx-auto'
                        mode='widthFix'
                      />
                      <Text className='block text-center text-sm mt-2 text-[#666]'>
                        {item.title}
                      </Text>
                    </Navigator>
                  );
                })}
              </View>
            </View>
          );
        })}
      </View>

      <Login visible={visible} onClose={setFalse} />
    </>
  );
}