import { Typography } from 'antd';
import React from 'react';
import XinForm from '@/components/XinForm';
import type { FormColumn } from '@/components/XinForm/typings';
import { useTranslation } from 'react-i18next';
import createAxios from '@/utils/request';

const { Title, Text } = Typography;

const Store: React.FC = () => {
  const { t } = useTranslation();

  const columns: FormColumn[] = [
    {
      title: t('merchant.portal.store.name'),
      dataIndex: 'name',
      valueType: 'text',
      rules: [{ required: true, message: t('merchant.portal.store.name.required') }],
    },
    {
      title: t('merchant.portal.store.logo'),
      dataIndex: 'logo',
      valueType: 'text',
    },
    {
      title: t('merchant.portal.store.banner'),
      dataIndex: 'banner',
      valueType: 'text',
    },
    {
      title: t('merchant.portal.store.description'),
      dataIndex: 'description',
      valueType: 'textarea',
    },
    {
      title: t('merchant.portal.store.contact_name'),
      dataIndex: 'contact_name',
      valueType: 'text',
    },
    {
      title: t('merchant.portal.store.contact_mobile'),
      dataIndex: 'contact_mobile',
      valueType: 'text',
    },
    {
      title: t('merchant.portal.store.province'),
      dataIndex: 'province',
      valueType: 'text',
    },
    {
      title: t('merchant.portal.store.city'),
      dataIndex: 'city',
      valueType: 'text',
    },
    {
      title: t('merchant.portal.store.district'),
      dataIndex: 'district',
      valueType: 'text',
    },
    {
      title: t('merchant.portal.store.address'),
      dataIndex: 'address',
      valueType: 'text',
    },
    {
      title: t('merchant.portal.store.business_hours'),
      dataIndex: 'business_hours',
      valueType: 'text',
    },
    {
      title: t('merchant.portal.store.min_price'),
      dataIndex: 'min_price',
      valueType: 'text',
    },
  ];

  return (
    <>
      <div className="mb-5">
        <Title level={3}>{t('merchant.portal.store.page.title')}</Title>
        <Text type="secondary">{t('merchant.portal.store.page.description')}</Text>
      </div>
      <XinForm
        columns={columns}
        layoutType="Form"
        grid
        request={async () => {
          const { data } = await createAxios<any>({
            url: '/merchant-portal/store',
            method: 'get',
          });
          return data.data;
        }}
        onFinish={async (values) => {
          await createAxios({
            url: '/merchant-portal/store',
            method: 'put',
            data: values,
          });
          return true;
        }}
      />
    </>
  );
};

export default Store;