import { HStack, VStack } from "../lib/stack"
import Placeholder from "../lib/placeholder"
import { Icon, IconLink, IconName } from "../lib/icon"
import { Button } from "../lib/button"
import { Input } from "../lib/input"
import { Select } from "../lib/select"
import { Grid } from "../lib/grid"
import { Divider } from "../lib/divider"
import type { AvatarProps } from "../lib/avatar"

export const Cards = () => {
  return (
    <Grid>
      <div>
        <PaymentMethod />
        <CreateAccount />
        <TeamCard />
      </div>
      <div>
        <TeamMembers />
        <ShareDocument />
        <DateCard />
        <Notification />
      </div>
    </Grid>
  )
}

const TeamMembers = () => {
  /*
team_members = [("Sofia Davis", "m@example.com", "Owner"),("Jackson Lee", "p@example.com", "Member"),]
def TeamMemberRow(name, email, role):
    return DivFullySpaced(
        DivLAligned(
            DiceBearAvatar(name, 10,10),
            Div(P(name, cls=(TextT.sm, TextT.medium)),
                P(email, cls=TextPresets.muted_sm))),
        Button(role, UkIcon('chevron-down', cls='ml-4')),
        DropDownNavContainer(map(NavCloseLi, [
            A(Div('Viewer',    NavSubtitle('Can view and comment.'))),
            A(Div('Developer', NavSubtitle('Can view, comment and edit.'))),
            A(Div('Billing',   NavSubtitle('Can view, comment and manage billing.'))),
            A(Div('Owner',     NavSubtitle('Admin-level access to all resources.')))])))

TeamMembers = Card(*[TeamMemberRow(*member) for member in team_members],
        header = (H4('Team Members'),Subtitle('Invite your team members to collaborate.')))
  */

  const teamMembers = [
    { name: "Sofia Davis", email: "m@example.com", role: "owner" },
    { name: "Jackson Lee", email: "p@example.com", role: "member" },
  ]

  const roleOptions = [
    { value: "owner", label: "Owner" },
    { value: "developer", label: "Developer" },
    { value: "billing", label: "Billing" },
    { value: "member", label: "Member" },
  ]

  return (
    <VStack gap="1" class="m-3 p-4 rounded-xs border border-gray-300">
      <h2>Team Members</h2>
      <h5 class="text-gray-500">Invite your team members to collaborate.</h5>
      {teamMembers.map((member) => (
        <HStack h="between" gap="3" class="w-full p-2 hover:bg-gray-50 rounded">
          <Placeholder.Avatar size="10" rounded seed={member.name} />
          <div class="flex-1">
            <p class="font-medium">{member.name}</p>
            <p class="text-sm text-gray-500">{member.email}</p>
          </div>
          <Select options={roleOptions} value={member.role} />
        </HStack>
      ))}
    </VStack>
  )
}

const CreateAccount = () => {
  /*
CreateAccount = Card(
  Grid(Button(DivLAligned(UkIcon('github'),Div('Github'))),Button('Google')),
          DividerSplit("OR CONTINUE WITH", text_cls=TextPresets.muted_sm),
          LabelInput('Email',    id='email',   placeholder='m@example.com'),
          LabelInput('Password', id='password',placeholder='Password', type='Password'),
          header=(H3('Create an Account'),Subtitle('Enter your email below to create your account')),
          footer=Button('Create Account',cls=(ButtonT.primary,'w-full')))
  */

  return (
    <>
      <VStack gap="4" class="m-3 p-4 rounded-xs border border-gray-300">
        <h2>Create an Account</h2>
        <h5>Enter your email below to create your account</h5>
        <HStack h="evenly" gap="4">
          <Button variant="outline" class="grow">
            <Icon class="mr-1" name="Github" />
            Github
          </Button>
          <Button variant="outline" class="grow">
            <Icon class="mr-1" name="Mail" />
            Google
          </Button>
        </HStack>
        <Divider>OR CONTINUE WITH</Divider>
        <Input id="email" placeholder="m@example.com">
          Email
        </Input>
        <Input id="password" placeholder="Password" type="Password">
          Password
        </Input>
        <Button variant="primary">Create Account</Button>
      </VStack>
    </>
  )
}

const PaymentMethod = () => {
  /*
Grid(Button(DivCentered(Card1Svg,  "Card"),   cls='h-20 border-2 border-primary'),
      Button(DivCentered(PaypalSvg, "PayPal"), cls='h-20'),
      Button(DivCentered(AppleSvg,  "Apple"),  cls='h-20')),
Form(LabelInput('Name',        id='name',        placeholder='John Doe'),
      LabelInput('Card Number', id='card_number', placeholder='m@example.com'),
      Grid(LabelSelect(*Options(*calendar.month_name[1:],selected_idx=0),label='Expires',id='expire_month'),
          LabelSelect(*Options(*range(2024,2030),selected_idx=0),       label='Year',   id='expire_year'),
          LabelInput('CVV', id='cvv',placeholder='CVV', cls='mt-0'))),
    header=(H3('Payment Method'),Subtitle('Add a new payment method to your account.')))
  */
  const months = [
    { value: "01", label: "January" },
    { value: "02", label: "February" },
    { value: "03", label: "March" },
    { value: "04", label: "April" },
    { value: "05", label: "May" },
    { value: "06", label: "June" },
    { value: "07", label: "July" },
    { value: "08", label: "August" },
    { value: "09", label: "September" },
    { value: "10", label: "October" },
    { value: "11", label: "November" },
    { value: "12", label: "December" },
  ]

  const years = Array.from({ length: 10 }, (_, i) => ({
    value: String(2024 + i),
    label: String(2024 + i),
  }))

  return (
    <VStack gap="1" class="m-3 p-4 rounded-xs border border-gray-300">
      <h2>Payment Method</h2>
      <h5 class="text-gray-500">Add a new payment method to your account.</h5>
      <HStack h="evenly" gap="4" class="mt-3">
        <Button variant="outline" class="grow h-20 flex flex-col">
          <Icon name="CreditCard" />
          <p class="text-xs">Card</p>
        </Button>
        <Button variant="outline" class="grow h-20 flex flex-col">
          <Icon name="Apple" />
          <p class="text-xs">Apple</p>
        </Button>
        <Button variant="outline" class="grow h-20 flex flex-col">
          <Icon name="DollarSign" />
          <p class="text-xs">PayPal</p>
        </Button>
      </HStack>
      <VStack gap="4">
        <Input id="name" placeholder="John Doe">
          Name
        </Input>
        <Input id="card_number" placeholder="1234 5678 9012 3456">
          Card Number
        </Input>
        <HStack gap="4">
          <Select id="expire_month" options={months} placeholder="MM">
            Expires
          </Select>
          <Select id="expire_year" options={years} placeholder="YYYY">
            Year
          </Select>
          <Input id="cvv" placeholder="CVV">
            CVV
          </Input>
        </HStack>
      </VStack>
    </VStack>
  )
}

const TeamCard = () => {
  /*
TeamCard = Card(
  DivLAligned(
      DiceBearAvatar("Isaac Flath", h=24, w=24),
      Div(H3("Isaac Flath"), P("Library Creator"))),
  footer=DivFullySpaced(
      DivHStacked(UkIcon("map-pin", height=16), P("Alexandria, VA")),
      DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github")))),
  cls=CardT.hover)
*/
  return (
    <VStack gap="3" class="m-3 p-4 rounded-xs border border-gray-300">
      <HStack gap="2" v="center">
        <Placeholder.Avatar size="20" rounded seed="Isaac Flath" />
        <div>
          <Title>Isaac Flath</Title>
          <Subtitle>Library Creator</Subtitle>

          <H1>Isaac Flath</H1>

          <h2>Isaac Flath</h2>
          <h4>Library Creator</h4>
        </div>
      </HStack>
      <HStack h="between" gap="3" v="center">
        <Icon name="MapPin" size={6} />

        <Text small>Alexandria, VA</Text>
        <Text size="small">Alexandria, VA</Text>
        <Text.Small>Alexandria, VA</Text.Small>

        <p class="grow">Alexandria, VA</p>
        <IconLink name="Mail" size={6} />
        <IconLink name="Linkedin" size={6} />
        <IconLink name="Github" size={6} />
      </HStack>
    </VStack>
  )
}

const ShareDocument = () => {
  /*
ShareDocument = Card(
    DivLAligned(Input(value='http://example.com/link/to/document'),Button('Copy link', cls='whitespace-nowrap')),
    Divider(),
    H4('People with access', cls=TextPresets.bold_sm),
    *[TeamMemberRow(*member) for member in team_members],
    header = (H4('Share this document'),Subtitle('Anyone with the link can view this document.')))

DateCard = Card(Button('Jan 20, 2024 - Feb 09, 2024'))

section_content =(('bell','Everything',"Email digest, mentions & all activity."), 
                  ('user',"Available","Only mentions and comments"),
                  ('ban', "Ignoring","Turn of all notifications"))
  */

  const teamMembers = [
    { name: "Olivia Martin", email: "m@example.com", role: "r+w" },
    { name: "Isabella Nguyen", email: "b@example.com", role: "r" },
    { name: "Sofia Davis", email: "p@example.com", role: "r" },
  ]

  const options = [
    { value: "r+w", label: "Read and write access" },
    { value: "r", label: "Read-only access" },
    { value: "p", label: "Pending access", disabled: true },
  ]

  return (
    <VStack gap="1" class="m-3 p-4 rounded-xs border border-gray-300">
      <HStack h="start" gap="3">
        <Input value="http://example.com/link/to/document" class="grow" />
        <Button variant="outline">Copy link</Button>
      </HStack>
      <Divider>
        <Icon name="Circle" size="3" class="stroke-gray-300" />
      </Divider>
      <h4 class="font-bold">People with access</h4>
      {teamMembers.map((member) => (
        <HStack h="between" gap="3" class="w-full p-2 hover:bg-gray-50 rounded">
          <Placeholder.Avatar size="10" rounded seed={member.name} />
          <div class="flex-1">
            <p class="font-medium">{member.name}</p>
            <p class="text-sm text-gray-500">{member.email}</p>
          </div>
          <Select options={options} value={member.role} />
        </HStack>
      ))}
    </VStack>
  )
}
const DateCard = () => {
  const date: string = new Date().toISOString().slice(0, 16)
  return (
    <VStack gap="3" class="m-3 p-4 rounded-xs border border-gray-300">
      <Input type="datetime-local" value={date}>
        Select Date
      </Input>
    </VStack>
  )
}

const Notification = () => {
  /*
Notifications = Card(
    NavContainer(
        *[NotificationRow(*row) for row in section_content],
        cls=NavT.secondary),
    header = (H4('Notification'),Subtitle('Choose what you want to be notified about.')),
    body_cls='pt-0')
    */

  const sectionContent: { icon: IconName; title: string; description: string }[] = [
    { icon: "Bell", title: "Everything", description: "Email digest, mentions & all activity." },
    { icon: "User", title: "Available", description: "Only mentions and comments" },
    { icon: "Ban", title: "Ignoring", description: "Turn off all notifications" },
  ]

  return (
    <VStack gap="3" class="m-3 p-4 rounded-xs border border-gray-300">
      <h2>Notification</h2>
      <h4>Choose what you want to be notified about.</h4>
      {sectionContent.map((item) => (
        <HStack gap="3" v="center">
          <Icon name={item.icon} size={8} />
          <div class="flex-1">
            <p class="text-sm">{item.title}</p>
            <p class="text-sm text-gray-400">{item.description}</p>
          </div>
        </HStack>
      ))}
    </VStack>
  )
}
