'use client'

import * as React from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import DataTable from '../../data-table'
import { columns } from '../../../constant'
import { Select, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import PricePlanDetailViewModel from '@/lib/price-plan-detail/view-model'
import { observer } from 'mobx-react-lite'
import RatePlanSectionState from '@/lib/price-plan-detail/state/rate-plan-section-state'

interface Props {
  vm: PricePlanDetailViewModel
}

const RatePlanDialog = observer(({vm}: Props) => {
  const mainState = vm.getMainState()
  const formState = vm.getRatePlanFormState()

  return (
    <Dialog
      open={formState.getOpen()}
      onOpenChange={(val) => formState.setOpen(val)}
    >
      <DialogContent className="max-w-2xl max-h-[700px] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Create Rate Plan</DialogTitle>
          <DialogDescription></DialogDescription>
        </DialogHeader>
        <form action="" className='grid'>
          <div>
            <Label htmlFor='event-name'>Event Name*</Label>
            <Input id='event-name' value={mainState.getEventSelected()?.name} readOnly className='bg-zinc-300/50' />
          </div>
          <div>
            <Label htmlFor='rate plan name'>Rate Plan Name*</Label>
            <Input
              id='rate-plan-name'
              value={formState.getRatePlanName()}
              placeholder='Input plan name'
              onChange={(e) => formState.setRatePlanName(e.currentTarget.value)}
            />
          </div>
          <div>
            <Label htmlFor='rate plan code'>Rate Plan Code</Label>
            <Input
              id='rate-plan-code'
              value={formState.getRatePlanCode()}
              placeholder='input rate plan code'
              onChange={(e) => formState.setRatePlanCode(e.currentTarget.value)}
            />
          </div>
          <div>
            <Label htmlFor='remarks'>Remarks</Label>
            <Input
              id='remarks'
              value={formState.getRemarks()}
              placeholder='input remarks'
              onChange={(e) => formState.setRemarks(e.currentTarget.value)}
            />
          </div>
          <div>
            <Label htmlFor='rate plan type'>Rate Plan Type</Label>
            <RadioGroup defaultValue={formState.getRatePlanType()} className='flex h-8'>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="r" id="rating" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
                <Label htmlFor="rating">Rating</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="a" id="accumulation" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
                <Label htmlFor="accumulation">Accumulation</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="b" id="benefit" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
                <Label htmlFor="benefit">Benefit</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="t" id="tax" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
                <Label htmlFor="tax">Tax</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="o" id="optional rate plan" onChange={(e) => formState.setRatePlanType(e.currentTarget.value)} />
                <Label htmlFor="optional rate plan">Optional Rate Plan</Label>
              </div>
            </RadioGroup>
          </div>
        </form>
        <section>
          <h3>Event Feature</h3>
          <DataTable data={[]} columns={columns} />
        </section>
        <section>
          <p>If you add event properties, the ratte plan will be mapping rate plan, otherwise a single one. Drags the items in the list to change their priority</p>
          <h3 className='font-semibold'>Detail</h3>
          <div className='grid grid-cols-2 gap-1'>
            <div>
              <Label>Source Type *</Label>
              <Select >
                <SelectTrigger className="bg-zinc-300">
                  <SelectValue placeholder="Select item" />
                </SelectTrigger>
              </Select>
            </div>
            <div>
              <Label>Destination Type *</Label>
              <Select >
                <SelectTrigger className="bg-zinc-300">
                  <SelectValue placeholder="Select item" />
                </SelectTrigger>
              </Select>
            </div>
            <div>
              <Label>Label*</Label>
              <Input className='bg-zinc-300' readOnly />
            </div>
          </div>
        </section>
        <div className='flex justify-end gap-2'>
          <Button variant="outline">Cancel</Button>
          <Button variant="default" onClick={() => {
            mainState.setFlow(2)
            formState.reset()
            mainState.setRatePlans([new RatePlanSectionState()])
            
          }}>Submit</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
})

export default RatePlanDialog