import { Button, Form, Input } from 'antd';
import { TextArea } from '../container/components/TextArea';
import clsx from 'clsx';

export const App = () => {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onSave = () => {
    //
  };
  const isEdit = form.getFieldValue('id');
  return (
    <div className='w-full h-full felx flex-col bg-gray-200'>
      <h1 className='text-center py-4'>Prompt JS Code Generate</h1>
      <div className='py-2 px-4 w-3/4 min-w-[600px] mx-auto border shadow rounded bg-white'>
        <Form form={form} onFinish={onFinish} className='mt-4' labelCol={{ span: 4 }}>
          <Form.Item name='id' hidden>
            <Input />
          </Form.Item>
          <Form.Item name='title' label='Title'>
            <Input />
          </Form.Item>
          <Form.Item name='description' label='Description'>
            <Input.TextArea rows={4} />
          </Form.Item>
          <Form.Item name='code' label='Code'>
            <TextArea className='max-h-full' style={{ minHeight: 300 }} />
          </Form.Item>
          <Form.Item label=' ' colon={false}>
            <div className='flex gap-2'>
              <Button type='primary' htmlType='submit'>
                Generate
              </Button>
              <Button htmlType='reset'>Reset</Button>
              <Button
                type='primary'
                onClick={() => {
                  //
                }}>
                Save
              </Button>
              <Button
                className={clsx(isEdit ? 'block' : 'hidden')}
                onClick={() => {
                  //
                }}>
                Preview
              </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};