import { createElement, render, useState } from 'rax';
import { Tag } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

import './index.css';

const { Selectable, Closable } = Tag;

const TagDemo = () => {
  let [hasChecked, setChecked] = useState(false);
  const handleClick = () => {
    console.log('click');
  };

  const handleDelete = (e) => {
    console.log('delete');
  };

  const handleSelect = (isChecked, e) => {
    console.log('select', isChecked, e);
    setChecked(isChecked);
  };

  const handleDeleteOnClick = () => {
    console.log('delete-click');
  };

  const handleDeleteAfterClose = () => {
    console.log('afterClose');
  };

  const handleDeleteOnClose = () => {
    return true;
  };

  const handleDeleteOnCloseFalse = () => {
    return false;
  };

  return (
    <View>
      <Text className="demo-title">basic</Text>
      <View className="demo-content">
        <View className="tag-row-title">
          <Text>large</Text>
          <Text>medium</Text>
          <Text>small</Text>
        </View>
        <View className="tag-row">
          <View className="demo-item-name">Enabled</View>
          <Tag size="large" type="normal" onClick={handleClick}>
            <Text>Tag</Text>
          </Tag>
          <Tag size="medium" type="normal" onClick={handleClick}>
            <Text>Tag</Text>
          </Tag>
          <Tag size="small" type="normal" onClick={handleClick}>
            <Text>Tag</Text>
          </Tag>
        </View>
        <View className="tag-row">
          <View className="demo-item-name">Disabled</View>
          <Tag size="large" type="normal" disabled onClick={handleClick}>
            <Text>Tag</Text>
          </Tag>
          <Tag size="medium" type="normal" disabled onClick={handleClick}>
            <Text>Tag</Text>
          </Tag>
          <Tag size="small" type="normal" disabled onClick={handleClick}>
            <Text>Tag</Text>
          </Tag>
        </View>
      </View>
      <Text className="demo-title">Primary</Text>
      <View className="tag-row-title">
        <Text>large</Text>
        <Text>medium</Text>
        <Text>small</Text>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Enabled</View>
        <Tag size="large" type="primary" onClick={handleClick}>
          <Text>Tag</Text>
        </Tag>
        <Tag size="medium" type="primary" onClick={handleClick}>
          <Text>Tag</Text>
        </Tag>
        <Tag size="small" type="primary" onClick={handleClick}>
          <Text>Tag</Text>
        </Tag>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Disabled</View>
        <Tag size="large" type="primary" disabled onClick={handleClick}>
          <Text>Tag</Text>
        </Tag>
        <Tag size="medium" type="primary" disabled onClick={handleClick}>
          <Text>Tag</Text>
        </Tag>
        <Tag size="small" type="primary" disabled onClick={handleClick}>
          <Text>Tag</Text>
        </Tag>
      </View>
      <Text className="demo-title">Selectable - normal</Text>
      <View className="tag-row-title">
        <Text>large</Text>
        <Text>medium</Text>
        <Text>small</Text>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Enabled</View>
        <Selectable size="large" type="normal" checked={hasChecked} onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable size="medium" type="normal" onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable size="small" type="normal" onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Disabled</View>
        <Selectable size="large" disabled onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable size="medium" disabled onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable size="small" disabled onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Selected</View>
        <Selectable size="large" checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable size="medium" checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable size="small" checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Selection</View>
        <Selectable size="large" disabled checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable size="medium" disabled checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable size="small" disabled checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
      </View>
      <Text className="demo-title">Selectable - primary</Text>
      <View className="tag-row-title">
        <Text>large</Text>
        <Text>medium</Text>
        <Text>small</Text>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Enabled</View>
        <Selectable type="primary" size="large" onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable type="primary" size="medium" onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable type="primary" size="small" onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Disabled</View>
        <Selectable type="primary" size="large" disabled onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable type="primary" size="medium" disabled onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable type="primary" size="small" disabled onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Selected</View>
        <Selectable type="primary" size="large" checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable type="primary" size="medium" checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable type="primary" size="small" checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Selection</View>
        <Selectable type="primary" size="large" disabled checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable type="primary" size="medium" disabled checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
        <Selectable type="primary" size="small" disabled checked onChange={handleSelect}>
          <Text>Tag</Text>
        </Selectable>
      </View>
      <Text className="demo-title">Closable - normal</Text>
      <View className="tag-row-title">
        <Text>large</Text>
        <Text>medium</Text>
        <Text>small</Text>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Enabled</View>
        <Closable onDelete={handleDelete} onClick={handleClick} size="large" type="normal">
          Tag
        </Closable>
        <Closable onDelete={handleDelete} onClick={handleClick} size="medium" type="normal">
          Tag
        </Closable>
        <Closable onDelete={handleDelete} onClick={handleClick} size="small" type="normal">
          Tag
        </Closable>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Disabled</View>
        <Closable size="large" onDelete={handleDelete} onClick={handleClick} disabled>
          Tag
        </Closable>
        <Closable size="medium" onDelete={handleDelete} onClick={handleClick} disabled>
          Tag
        </Closable>
        <Closable size="small" onDelete={handleDelete} onClick={handleClick} disabled>
          Tag
        </Closable>
      </View>
      <Text className="demo-title">Closable - primary</Text>
      <View className="tag-row-title">
        <Text>large</Text>
        <Text>medium</Text>
        <Text>small</Text>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Enabled</View>
        <Closable type="primary" onDelete={handleDelete} onClick={handleDeleteOnClick} size="large" closeArea="tag">
          Tag
        </Closable>
        <Closable
          type="primary"
          onDelete={handleDelete}
          afterClose={handleDeleteAfterClose}
          onClose={handleDeleteOnCloseFalse}
          size="medium"
        >
          Tag
        </Closable>
        <Closable type="primary" onDelete={handleDelete} onClose={handleDeleteOnClose} size="small">
          Tag
        </Closable>
      </View>
      <View className="tag-row">
        <View className="demo-item-name">Disabled</View>
        <Closable type="primary" size="large" onDelete={handleDelete} onClick={handleClick} disabled>
          Tag
        </Closable>
        <Closable type="primary" size="medium" onDelete={handleDelete} onClick={handleClick} disabled>
          Tag
        </Closable>
        <Closable type="primary" size="small" onDelete={handleDelete} onClick={handleClick} disabled>
          Tag
        </Closable>
      </View>
    </View>
  );
};

// render(<TagDemo />, null, { driver: DU });
 export default TagDemo