import {
  _deleteAdvertise,
  _putAdvertiseActiveStatus,
  _putAdvertiseMainStatus,
  _putBusinessActiveStatus,
} from '@/services/setting';
import { ProColumns } from '@ant-design/pro-components';
import { Image, message, Switch, Tag } from 'antd';
import dayjs from 'dayjs';
import DetailModal from './PriceEventForm';

export function PriceEventColumns({
  mainTableReload,
}: {
  mainTableReload: () => Promise<void> | undefined;
}): ProColumns<API.PriceEvent>[] {
  const handleChangeStatus = async (id: string, value: boolean) => {
    await _putBusinessActiveStatus({ id, is_active: value as boolean }).then(() => {
      mainTableReload?.();
      message.success('更新成功');
    });
  };
  return [
    {
      title: '時段名稱',
      dataIndex: 'event_name',
      width: 120,
      fixed: 'left',
    },
    {
      title: '星期一',
      dataIndex: 'mon',
      width: 200,
      render: (_, record) => (
        <div>
          <div>{`${record.mon.from} - ${record.mon.to}`}</div>
          <Tag color="blue">{`HK$ ${record.mon.price}/kWh`}</Tag>
        </div>
      ),
    },
    {
      title: '星期二',
      dataIndex: 'tue',
      width: 200,
      render: (_, record) => (
        <div>
          <div>{`${record.tue.from} - ${record.tue.to}`}</div>
          <Tag color="blue">{`HK$ ${record.tue.price}/kWh`}</Tag>
        </div>
      ),
    },
    {
      title: '星期三',
      dataIndex: 'wed',
      width: 200,
      render: (_, record) => (
        <div>
          <div>{`${record.wed.from} - ${record.wed.to}`}</div>
          <Tag color="blue">{`HK$ ${record.wed.price}/kWh`}</Tag>
        </div>
      ),
    },
    {
      title: '星期四',
      dataIndex: 'thu',
      width: 200,
      render: (_, record) => (
        <div>
          <div>{`${record.thu.from} - ${record.thu.to}`}</div>
          <Tag color="blue">{`HK$ ${record.thu.price}/kWh`}</Tag>
        </div>
      ),
    },
    {
      title: '星期五',
      dataIndex: 'fri',
      width: 200,
      render: (_, record) => (
        <div>
          <div>{`${record.fri.from} - ${record.fri.to}`}</div>
          <Tag color="blue">{`HK$ ${record.fri.price}/kWh`}</Tag>
        </div>
      ),
    },
    {
      title: '星期六',
      dataIndex: 'sat',
      width: 200,
      render: (_, record) => (
        <div>
          <div>{`${record.sat.from} - ${record.sat.to}`}</div>
          <Tag color="blue">{`HK$ ${record.sat.price}/kWh`}</Tag>
        </div>
      ),
    },
    {
      title: '星期日',
      dataIndex: 'sun',
      width: 200,
      render: (_, record) => (
        <div>
          <div>{`${record.sun.from} - ${record.sun.to}`}</div>
          <Tag color="blue">{`HK$ ${record.sun.price}/kWh`}</Tag>
        </div>
      ),
    },
    // {
    //   title: '特殊日期',
    //   dataIndex: 'special',
    //   width: 200,
    //   render: (_, record) => (
    //     <div>
    //       <div>{`${record.special.from} - ${record.special.to}`}</div>
    //       <Tag color="gold">{`HK$ ${record.special.price}/kWh`}</Tag>
    //     </div>
    //   ),
    // },
    {
      title: '狀態',
      dataIndex: 'is_active',
      width: 100,
      render: (active, record) => (
        <Switch
          checked={active as boolean}
          checkedChildren="啟用"
          unCheckedChildren="停用"
          onChange={(checked) => handleChangeStatus(record.id, checked)}
        />
      ),
    },
    // {
    //   title: '到期日期',
    //   dataIndex: 'expire_date',
    //   width: 150,
    //   render: (date) => dayjs.unix(date as number).format('YYYY-MM-DD'),
    // },
    {
      title: '更新時間',
      dataIndex: 'updatedAt',
      width: 150,
      render: (date) => dayjs(date as string).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '操作',
      width: 120,
      fixed: 'right',
      render: (_, record) => (
        <DetailModal key="edit" initData={record} mainTableReload={mainTableReload} />
      ),
    },
  ];
}

export function AdvertiseColumns({
  mainTableReload,
}: {
  mainTableReload: () => Promise<void> | undefined;
}): ProColumns<API.Advertise>[] {
  const handleChangeStatus = async (id: string, value: boolean, type: 'is_show' | 'is_main') => {
    console.log('id', id, 'value', value, 'type', type);
    if (type === 'is_show') {
      await _putAdvertiseActiveStatus({ id, is_show: value as boolean }).then(() => {
        mainTableReload?.();
        message.success('更新成功');
      });
    } else if (type === 'is_main') {
      await _putAdvertiseMainStatus({ id }).then(() => {
        mainTableReload?.();
        message.success('更新成功');
      });
    }
  };
  const handleDelete = async (id: string) => {
    console.log('id', id);
    await _deleteAdvertise(id).then(() => {
      mainTableReload?.();
      message.success('刪除成功');
    });
  };
  return [
    {
      title: '廣告名稱',
      dataIndex: 'title',
      width: 120,
      ellipsis: true,
      copyable: true,
    },
    {
      title: '廣告內容',
      dataIndex: 'text',
      width: 200,
      ellipsis: true,

      onCell: () => ({
        style: {
          maxWidth: '200px',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        },
      }),
    },
    {
      title: '廣告圖片',
      dataIndex: 'image_url',
      width: 120,
      render: (_, record) => (
        <Image
          src={record.image_url}
          alt={record.title}
          width={80}
          height={80}
          style={{ objectFit: 'cover' }}
        />
      ),
    },
    {
      title: '顯示狀態',
      dataIndex: 'is_show',
      width: 100,
      render: (isShow, record) => (
        <Switch
          checked={isShow as boolean}
          checkedChildren="顯示"
          unCheckedChildren="隱藏"
          onChange={(checked) => handleChangeStatus(record.id, checked, 'is_show')}
        />
      ),
    },
    {
      title: '主页廣告',
      dataIndex: 'is_main',
      width: 100,
      render: (isMain, record) => (
        <Switch
          checked={isMain as boolean}
          checkedChildren="是"
          unCheckedChildren="否"
          onChange={(checked) => handleChangeStatus(record.id, checked, 'is_main')}
        />
      ),
    },

    {
      title: '操作',
      width: 120,
      valueType: 'option',
      fixed: 'right',
      render: (_, record) => [
        <a key="delete" className="text-red-500" onClick={() => handleDelete?.(record.id)}>
          刪除
        </a>,
      ],
    },
  ];
}
