import React, { useState } from 'react'
import { Meta } from '@storybook/react/types-6-0'
import { Story } from '@storybook/react'
import { Form,FormProps } from './Form'
import { IJsonSchema } from '../../types/IJsonSchema'
import { Button } from '../Button/Button'
import styled from 'styled-components'

export default {
  title:'Components/Form',
  component: Form,
  argTypes: {}
} as Meta

const jsonSchema:IJsonSchema = {
  type: 'object',
  properties: {
    name: {
      type: 'string'
    },
    email: {
      type: 'string',
      format: 'email'
    },
    password: {
      type: 'string',
      format: 'password',
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
      errorMessage: 'Passwords need to have at least 8 characters, upper and lower case, and at least one number'
    },
    age: {
      type: 'number',
      minimum: 0,
      maximum: 100,
    },
    days: {
      type: 'number',
      minimum: 1,
      maximum: 20,
    },
    vatPercentage: {
      type: 'percentage',
      minimum: 0,
      maximum: 100,
    },
    isAdult: {
      type: 'boolean',
      const: true,
      errorMessage: 'must be ticked'
    },
    status: { 
      type: 'string',
      enum: ['active', 'inactive', 'paused'] 
    },
    biography: {
      type: 'string',
      format: 'multi',
    },
    clockIn: {
      type: 'string',
      format: 'time'
    },
    darkMode: {
      type: 'boolean',
      format: 'switch'
    } 
  }
}

const Template: Story<FormProps> = (args) => {
  const [values, setValues] = useState({})

  return <Form
    {...args}
    setValues={setValues}
    values={values}
  />
}

export const Basic = Template.bind({})
Basic.args = { jsonSchema, css:'width:400px;padding:20px;display:flex;flex-direction:column;gap:12px;' }

const loginJsonSchema:IJsonSchema = {
  type: 'object',
  properties: {
    name: {
      type: 'string'
    },
    email: {
      type: 'string',
      format: 'email'
    },
    password: {
      type: 'string',
      format: 'password',
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
      errorMessage: 'this is a custom error'
    },
  }
}

const LoginTemplate: Story<FormProps> = (args) => {
  const [values, setValues] = useState({})

  const handleSubmit = () => {
    console.log('submitted form ')
  }

  return (
    <Container>
      <Form
        {...args}
        setValues={setValues}
        values={values}
        onEnterKeyDown={handleSubmit}
      />
      <Button onClick={handleSubmit} type="submit">Login</Button>
    </Container>
  )
}

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`

export const Login = LoginTemplate.bind({})
Login.args = { jsonSchema:loginJsonSchema, css:'width:400px;padding:20px;display:flex;flex-direction:column;gap:12px;' }

      
    
  